BrowserSync：在更改时重新加载 HTML

Question

我正在使用 Gulp + BrowserSync，当我的 HTML 文件发生更改时，我试图重新加载我的开发网站，但我似乎无法让它工作。

我在命令行中没有收到任何错误，我的页面似乎重新加载，但我所做的更改没有出现在浏览器中，除非我退出 gulp 任务并再次运行它。

这是我目前的设置：

var gulp = require('gulp');
var browserify = require('browserify');
var swig = require('gulp-swig');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('serve', function () {
  browserSync({
    server: {
      baseDir: './Build'
    }
  });
});

gulp.task('templates', function() {
  return gulp.src('./src/*.html')
    .pipe(swig())
    .pipe(gulp.dest('./Build'))
    .pipe(reload({stream: true}))
});

// Default task
gulp.task('default', ['serve', 'templates', 'sass', 'js'], function() {
  gulp.watch('./src/*.html', ['templates']);
  gulp.watch(['./src/scss/*.scss', './src/scss/**/*.scss'], ['sass']);
  gulp.watch('./src/js/*.js', ['js']);
});

对此的任何帮助表示赞赏。提前致谢！

Answer 1

这个设置中的问题似乎是痛饮。当您检查./Build 中的文件时，它们没有更改，因此浏览器正在正确加载文件。但是 swig 没有得到这些变化。禁用 swig 的缓存功能应该可以解决这个问题：

gulp.task('templates', function() {
  return gulp.src('./src/*.html')
    .pipe(swig({
      defaults: { cache: false }
    }))
    .pipe(gulp.dest('./Build'))
    .pipe(reload({stream: true}));
});