Browsersync reload in a loop with nunjucks task

问题:

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.

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

• 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']);
  

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.