Gulp Browsersync verursacht mehrere Neuladevorgänge mit jeder Dateiänderung

Question

Ich benutze browsersync mit Gulp, einige Aufgaben auf bestimmten Dateiänderungen ausgeführt. Immer wenn ich eine Datei speichere, bekomme ich 10+ [BS] Reloading Browsers... in meinem Terminal und die Leistung ist verständlicherweise laggy.

Hier sind meine gulpfile:

gulp.task('bowerJS', function() { 
    gulp.src(lib.ext('js').files) 
    .pipe(concat('lib.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('app/assets/js')); 
}); 

gulp.task('bowerCSS', function() { 
    gulp.src(lib.ext('css').files) 
    .pipe(concat('lib.min.css')) 
    .pipe(gulp.dest('app/assets/css/')); 
}); 


// Compile sass into CSS & auto-inject into browsers 
gulp.task('less', function() { 
    gulp.src('./app/css/*.less') 
     .pipe(less()) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('app/assets/css')) 
     .pipe(browserSync.stream()); 
}); 

// Render Jade templates as HTML files 

gulp.task('templates', function() { 
    gulp.src('views/**/*.jade') 
    .pipe(jade({ 
     pretty: true 
    })) 
    .pipe(gulp.dest('app/src/')) 
}); 

gulp.task('php', function() { 
    php.server({ base: 'app', port: 8123, keepalive: true}); 
}); 
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', 'php'], function() { 


    var proxyOptions1 = url.parse('http://some-site:1234'); 
     proxyOptions1.route = '/api/hi'; 

    browserSync({ 
     port: 8999, 
     proxy: '127.0.0.1:8123', 
     middleware: [ 
       proxy(proxyOptions1), 
       history() 
     ], 
     notify: false 
    }); 


    gulp.watch("app/assets/css/*.less", ['less']); 
    gulp.watch("app/**/*.html").on('change', browserSync.reload); 
    gulp.watch("app/assets/js/*.js").on('change', browserSync.reload); 
    gulp.watch("views/**/*.jade", ['templates']); 
}); 

Was mache ich falsch hier?

Answer 1

Verwendung nur browserSync.stream (ersetzen browserSync.reload dann) und übergeben Option once: true wie diese

browserSync.stream({once: true}) 

sollte dies gut funktioniert.

Answer 2

Die awaitWriteFinish Option in Chokidar repariert es für mich.

Beispiel:

browserSync.init({ 
    server: dist.pages, 
    files: dist.css + '*.css', 
    watchOptions: { 
     awaitWriteFinish : true 
    } 
});