Question

我使用的是firefox浏览器，当运行gulp watch时，没有连接browserync的弹出窗口，是否需要一个插件来运行它。

我的gulpfile.js是

//加载Gulp ......当然 var gulp = require（＆＃39; gulp＆＃39;）;

// CSS related plugins
var sass         = require( 'gulp-sass' );
var autoprefixer = require( 'gulp-autoprefixer' );
var minifycss    = require( 'gulp-uglifycss' );

// JS related plugins
var concat       = require( 'gulp-concat' );
var uglify       = require( 'gulp-uglify' );
var babelify     = require( 'babelify' );
var browserify   = require( 'browserify' );
var source       = require( 'vinyl-source-stream' );
var buffer       = require( 'vinyl-buffer' );
var stripDebug   = require( 'gulp-strip-debug' );

// Utility plugins
var rename       = require( 'gulp-rename' );
var sourcemaps   = require( 'gulp-sourcemaps' );
var notify       = require( 'gulp-notify' );
var plumber      = require( 'gulp-plumber' );
var options      = require( 'gulp-options' );
var gulpif       = require( 'gulp-if' );

// Browers related plugins
var browserSync  = require( 'browser-sync' ).create();
var reload       = browserSync.reload;

// Project related variables
var projectURL   = 'https://animesh.dev';

var styleSRC     = './src/scss/mystyle.scss';
var styleURL     = './assets/';
var mapURL       = './';

var jsSRC        = './src/js/myscript.js';
var jsURL        = './assets/';

var styleWatch   = './src/scss/**/*.scss';
var jsWatch      = './src/js/**/*.js';
var phpWatch     = './**/*.php';

// Tasks
gulp.task( 'browser-sync', function() {
    browserSync.init({
        proxy: projectURL,
        https: {
            key: '/home/animeshsahu/.valet/Certificates/animesh.dev.key',
            cert: '/home/animeshsahu/.valet/Certificates/animesh.dev.crt'
        },
        injectChanges: true,
        open: false
    });
});

gulp.task( 'styles', function() {
    gulp.src( styleSRC )
        .pipe( sourcemaps.init() )
        .pipe( sass({
            errLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on( 'error', console.error.bind( console ) )
        .pipe( autoprefixer({ browsers: [ 'last 2 versions', '> 5%', 'Firefox ESR' ] }) )
        .pipe( sourcemaps.write( mapURL ) )
        .pipe( gulp.dest( styleURL ) )
        .pipe( browserSync.stream() );
});

gulp.task( 'js', function() {
    return browserify({
        entries: [jsSRC]
    })
    .transform( babelify, { presets: [ 'env' ] } )
    .bundle()
    .pipe( source( 'myscript.js' ) )
    .pipe( buffer() )
    .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
    .pipe( sourcemaps.init({ loadMaps: true }) )
    .pipe( uglify() )
    .pipe( sourcemaps.write( '.' ) )
    .pipe( gulp.dest( jsURL ) )
    .pipe( browserSync.stream() );
 });

function triggerPlumber( src, url ) {
    return gulp.src( src )
    .pipe( plumber() )
    .pipe( gulp.dest( url ) );
}

 gulp.task( 'default', ['styles', 'js'], function() {
    gulp.src( jsURL + 'myscript.min.js' )
        .pipe( notify({ message: 'Assets Compiled!' }) );
 });

 gulp.task( 'watch', ['default', 'browser-sync'], function() {
    gulp.watch( phpWatch, reload );
    gulp.watch( styleWatch, [ 'styles' ] );
    gulp.watch( jsWatch, [ 'js', reload ] );
    gulp.src( jsURL + 'myscript.min.js' )
        .pipe( notify({ message: 'Gulp is Watching, Happy Coding!' }) );
 });

另外我使用valet-linux所以我给了浏览器同步一个证书。为了使browsersync工作，我还需要额外的插件吗？它会工作吗？

我的终端输出是：

//this is zsh shell i called just "gulp watch"
➜  hyparticles gulp watch
[10:27:33] Using gulpfile ~/Sites/animesh/wp-content/plugins/hyparticles/gulpfile.js
[10:27:33] Starting 'styles'...
[10:27:33] Finished 'styles' after 22 ms
[10:27:33] Starting 'js'...
[10:27:33] Starting 'browser-sync'...
[10:27:33] Finished 'browser-sync' after 30 ms
[Browsersync] Proxying: https://animesh.dev
[Browsersync] Access URLs:
 ---------------------------------------
       Local: https://localhost:3000
    External: https://192.168.191.1:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.191.1:3001
 ---------------------------------------
[Browsersync] 2 files changed (mystyle.css.map, mystyle.css)
[Browsersync] 2 files changed (myscript.js.map, myscript.js)
[10:27:34] Finished 'js' after 1.25 s
[10:27:34] Starting 'default'...
[10:27:34] Finished 'default' after 3.34 ms
[10:27:34] Starting 'watch'...
[10:27:37] Finished 'watch' after 3.3 s
[Browsersync] Reloading Browsers... (buffered 2 events)

Answer 1

如果我正确理解您的问题，看起来它正在运行，但您已经

open: false

在浏览器同步任务中设置，这会阻止Browsersync尝试打开浏览器（默认情况下使用＆＃39;本地地址）。

因此，您需要手动将浏览器连接到提供的localhost:3000或192.168.191.1:3000地址以查看您的开发网站，或者连接到localhost:3001或192.168.191.1:3001以查看Browsersync UI，它是您可以控制连接的浏览器的中央控制界面。

Answer 2

嗯，但我找到了自己的解决方案，好吧，我代理了一个php-nginx服务器（valet-linux），所以我必须手动将这个东西包含在我的页面中，如下所示：

<?php
echo <<<HTML
    <script id="__bs_script__">//<![CDATA[
            document.write("<script async src='https://HOST:3000/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
    //]]></script>
HTML;

所以建立了连接，一切运作良好。

BrowserSync无法正常运行gulpfile.js

2 个答案: