Browsersync reload in a loop with nunjucks task

2019-07-22 14:16发布

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.

0条回答
登录 后发表回答