gulp/nodemonでbrowsersyncを使用する

Question

私は、Browsersync（バージョン2.12.5）をgulp-nodemon/watchファイルで扱おうとしています。これらは私の一口仕事です。私は私のファイルのいずれかを更新する/ブラウザをリロードするように見えることはできません。

var $ = require('gulp-load-plugins')(); 
    var browserSync = require('browser-sync'); 
    var gulp = require('gulp'); 
    // load in gulp tasks etc...... 

    gulp.task('server', function() { 
    return $.nodemon({ 
     script: 'server.js' 
    }); 
    }); 

    gulp.task('browser-sync', ['server'], function() { 
    browserSync.init({ 
     proxy: 'http://localhost:3000', 
     port: 4000, 
     open: false, 
     notify: false, 
     logConnections: false, 
     reloadDelay: 1000 
    }); 
    }); 

    gulp.task('watch', ['browser-sync'], function() { 
    var scripts = 'public/static/scripts/**/*.js'; 
    var styles = 'public/static/styles/**/*.styl'; 

    gulp.watch(scripts, ['scripts']); 
    gulp.watch(styles, ['styles']); 
    }); 

    gulp.task('scripts', function() { 
    return gulp.src('public/static/scripts/**/*.js') 
     .pipe($.plumber()) 
     .pipe(gulp.dest('build/static/scripts')); 
    }); 

    gulp.task('styles', function() { 
    return gulp.src('public/static/styles/app.styl', {base: 'public'}) 
     .pipe($.stylus()) 
     .pipe(gulp.dest('build')) 
    }); 

nodemonでBrowsersyncを使用するための推奨方法は何ですか？

Answer 1

nodemonがサーバを起動する前に、Browser syncがブラウザをリフレッシュするようです。ここで

がnodemonとBrowser syncを示して、私のコマンドラインからのログですが、あなたはnodemon私はこの同じ問題を抱えていた後半

[18:21:09] Finished 'jade' after 5.32 μs 
[18:21:09] [nodemon] restarting due to changes... 
>> node restart 
[BS] Reloading Browsers... 
[18:21:09] [nodemon] restarting due to changes... 
>> node restart 
[BS] Reloading Browsers... 
[18:21:09] [nodemon] restarting due to changes... 
>> node restart 
[BS] Reloading Browsers... 
[18:21:09] [nodemon] starting `node ./bin/www` 
nodemon started 

を開始しまし表示されます。以下は、私はまた、ブラウザ同期+ nodemon、 ためgulpfileを構築しようとしている

// Initialize browserSync 
var browserSync = require('browser-sync').create(), 
    reload  = browserSync.reload; 


// watcher 
gulp.task('watch', function() { 
    var scripts = 'public/static/scripts/**/*.js'; 
    var styles = 'public/static/styles/**/*.styl'; 

    gulp.watch(scripts, ['scripts']); 
    gulp.watch(styles, ['styles']); 
    gulp 
    .watch('public') 
    .on('change', reload); // the static files you want to watch and reload 
}); 

// browser-sync 
gulp.task('browser-sync', function() { 
    browserSync.init({ 
    proxy: 'http://localhost:3000',// Don't use proxy 
    port: 4000, // Desired PORT address. 
    open: false, 
    notify: false, 
    logConnections: false, 
    reloadDelay: 1000 
    server: 'public', // Your compiled static directory 
    }); 
}) 

gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']) // This builds my script, styles and other static assets(img), starts browser-sync and watches for changes.