Browsersync reload in a loop

[stevenMouret]

Hi

Issue details

For some time I have a problems with Browsersync. I have a web front-end workflow with Gulp, Browsersync, SASS and Nunjucks. Gulp compile my Nunjucks files. At the end of this task, browser is reloaded with Browsersync. Before a few days browsersync reloaded browser just once. Now it reload browser as many times as there are nunjucks files.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.13.0 ]
• Node [ 6.9.1 ]
• Npm [ 4.0.2 ]

Affected platforms

• windows

Browsersync use-case

• Gulp

gulp.task('njk', function () {
    return gulp.src(templatesInput)
        .pipe(nunjucksRender({
            path: templatesFolder,
            ext:  '.html'
        }))
        .pipe(gulp.dest(templatesOutput))
        .pipe(browserSync.stream());
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: render
        }
    });
    // Watch Sass
    gulp.watch(scssInput, ['css']).on('change', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

     // Watch nunjuck
    gulp.watch(templatesInput, ['njk']).on('change', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

gulp.task('default', ['serve', 'css', 'njk']);

[stevenMouret]

I specify that my files are in folders and in subfolders.

var templatesFolder = siteSources + 'templates/';
var templatesInput = templatesFolder + '**/*.njk';

I did test again. I added a task that launches njk task once it is finished.

gulp.task('njk-watch', ['njk'], function (done) {
        browserSync.reload();
    done();
});

And I call this task in my watcher. But doesn't work, reloading it's not done. Strange because it's the recommended method in the doc https://browsersync.io/docs/gulp#gulp-reload

If I remove 'return' on my main task 'njk'. In this case there is no more multiple reloading. But the reloading is before the end of the njk task.

gulp.task('njk', function () {
    gulp.src(templatesInput)
        .pipe(nunjucksRender({
        ....

For the moment the only way is to remove return on 'njk task' and add a setTimeout but I think there is a best method.

gulp.task('njk', function () {
    gulp.src(templatesInput)
        .pipe(nunjucksRender({
            path: templatesFolder,
            ext:  '.html'
        }))
        .pipe(gulp.dest(templatesOutput));
});

// Reload browser after 2.5s
gulp.task('njk-watch', ['njk'], function (done) {
    setTimeout(function() {
        browserSync.reload();
    }, 2500);
    done();
});

Thanks a lot for your help.

[camdagr8]

Could it be that your njk task is doing a .stream() and then the .reload() is firing during the same time?

[adgoncal]

I am having a similar issue with gulp and browser-sync 2.18.8. Everything works fine on 2.18.7.

Every time I save a file, browser-sync outputs "[BS] Reloading Browsers" multiple times (once for each watched file) and reloads the browser that many times.

On 2.18.7 it does not output "[BS] Reloading Browsers" at all, but the browser does reload once.

const gulp = require('gulp');
const browserSync = require('browser-sync');
const $ = require('gulp-load-plugins')();

gulp.task('scripts', function () {
  return gulp.src('src/app/**/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.sourcemaps.write())
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe(browserSync.reload({ stream: true }))
    .pipe($.size())
});

---

Edit:
I forgot to mention that I am using Node v4.4.7 and npm 3.10.10, running on Linux.

[giovannipds]

I may be on the same bug with Laravel 5.4 / Laravel Mix. =S

Related to #439 and #981?

[strarsis]

Any plans to fix this in the near future? Just ran into that bug again in 2021.

[IrinaGrigoryan]

I had similar issue with scripts. The bundled JS files (*.bundle.js) lied in the folder I watched was causing multiple reloads.

This is helped me (exclude *.bundle.js from watch with !):

const reload = (done) => {
      browserSync.reload();
      done();
};

gulp.watch(['js/**/*.js', '!js/**/*.bundle.js'], gulp.series('scripts', reload));