BrowserSync 运行到 gulpfile.js 不工作

Question

我使用的是 firefox 浏览器，当运行 gulp 手表没有连接 browsersync 的弹出窗口时，运行是否需要插件。

我的gulpfile.js是

// 加载 Gulp...当然 var gulp = require('gulp');

// 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

在您的 browser-sync 任务中设置，这将阻止 Browsersync 尝试打开浏览器（默认使用 'local' 地址）。

因此，您需要手动将浏览器连接到提供的 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 不工作

BrowserSync not working running through gulpfile.js

javascript

php

css

node.js

browser-sync

BrowserSync 运行 到 gulpfile.js 不工作

BrowserSync not working running through gulpfile.js

javascript

php

css

node.js

browser-sync

BrowserSync 运行到 gulpfile.js 不工作