BrowserSync 在第二次刷新后显示更改答案

【问题标题】：BrowserSync displays changes after 2nd refreshBrowserSync 在第二次刷新后显示更改
【发布时间】：2015-11-16 09:02:44
【问题描述】：

我在 gulp 中遇到了 browserSync 插件的烦人问题。如果我在 html 中更改某些内容，则会在第二次刷新后显示更改。它仅适用于 html，如果我更改 css 或 js，则更改在第一次重新加载后可见。这是我的 browserSync 任务：

gulp.task('serve', function () {

    browserSync.init({
        server: {
            baseDir: ["./dist", "./dev", "./../../global-assets"]
        }
    });

    gulp.watch('dev/sass/**', ['sass']);
    gulp.watch('dev/sass/**').on('change', reload);
    gulp.watch('dev/js/*.js', ['js']);
    gulp.watch('dev/js/*.js').on('change', reload);
    gulp.watch('dev/templates/*.html', ['htmlSSI']);
    gulp.watch('dev/templates/*.html').on('change', reload);
});

和 SSI 任务：

gulp.task('htmlSSI', function() {
        es.merge(gulp.src(globalTemplates), gulp.src(localTemplates))
        .pipe(includer())
        .pipe(gulp.dest('dist/'));
});

【问题讨论】：

标签： javascript gulp ssi browser-sync

【解决方案1】：

看起来您在 htmlSSI 任务更改 dist 文件夹中的 html 之前正在重新加载页面

gulp.watch('dev/templates/*.html').on('change', reload);

尝试将其更改为观看来自 htmlSSI 任务的输出 html

gulp.watch('dist/*.html').on('change', reload);

【讨论】：