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

BrowserSync：在更改时重新加载HTML

1 个答案: