Gulp Browsersync causes several reboots every time a file is changed

Question

I use browserersync with Gulp, performing some tasks in specific files. Whenever I save a file, I get 10+ [BS] Reloading Browsers... in my terminal, and the performance seems to be laggy.

Here is my 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']); }); 

What am I doing wrong here?

Answer 1

use only browserSync.stream (then replace browserSync.reload) and execute the once: true option similar to this

 browserSync.stream({once: true}) 

this should work fine.

Answer 2

The awaitWriteFinish option in Chokidar fixed it for me.

Example:

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