Verwenden von Browsersync mit Schluck/Knotenmonitor

Question

Ich versuche, Browsersync (Version 2.12.5) mit gulp-nodemon/Watching-Dateien zu arbeiten. Das sind meine Schluckaufgaben. Ich kann anscheinend keine meiner Dateien erhalten, um den Browser zu aktualisieren/neu zu laden.

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')) 
    }); 

Was ist der empfohlene Weg Browsersync mit nodemon zu bedienen?

Answer 1

Anscheinend scheint es, Browser sync aktualisiert den Browser, bevor nodemon den Server startet.

Hier ist ein Protokoll aus meiner Befehlszeile, die nodemon und Browser sync zeigt, werden Sie sehen nodemon spät

[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 

begann ich das gleiche Problem hatte. Unten war meine Lösung

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