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.