Question

有一段时间我遇到Browsersync问题。我有一个与Gulp，Browsersync，SASS和Nunjucks的网络前端工作流程。 Gulp编译我的Nunjucks文件。在此任务结束时，浏览器将重新加载Browsersync。在几天之前，browserync只重新加载浏览器一次。现在它重新加载浏览器的次数与nunjucks文件一样多。

Browsersync [2.13.0]
节点[6.9.1]
Npm [4.0.2]
窗

咕嘟咕嘟

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

我指定我的文件位于文件夹和子文件夹中。

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

我再次测试了。我添加了一个任务，一旦完成就启动njk任务。

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

我在观察者中称这个任务。但是没有用，重装它没有完成。很奇怪，因为它是文档https://browsersync.io/docs/gulp#gulp-reload

中的推荐方法

如果我在主要任务'njk'上删除'return'。在这种情况下，不再有多次重新加载。但重新加载是在njk任务结束之前。

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

目前唯一的方法是删除'njk task'的返回并添加一个setTimeout，但我认为有一个最好的方法。

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();
});

非常感谢你的帮助。

Browsersync使用nunjucks任务重新加载循环

0 个答案: