gulp - 使用 browserSync 时如何处理浏览器缓存？

Question

我将 gulp 与 browserSync 与下一个配置一起使用(简化):

gulp.task('serve', ['compile_styles'], function() {
    browserSync.init({
        proxy: 'my-local-dev.site'
    });

    gulp.watch('/public/styles/**/*.scss', ['compile_styles']);
    gulp.watch('/public/js/**/*.js').on('change', browserSync.reload);
    gulp.watch('/**/*.php').on('change', browserSync.reload);
});

正在推送 SCSS 更改 .pipe(browserSync.reload({stream: true}))内compile_styles任务，但正如您所看到的 .js我使用的文件很简单 browserSync.reload并且它不起作用，因为浏览器(chrome 57.0.2987.133(64 位))从其内部缓存加载静态文件，因此我需要进行额外的重新加载以刷新该缓存并强制浏览器再次加载该文件。

同样的事情可以与任何静态资源相关，例如图像、字体等。那么在使用 browserSync 时如何处理浏览器缓存呢？

Answer 1

你为什么不使用 gulp-cache

var cache = require('gulp-cache');   

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

  // Still pass the files to clear cache for
  gulp.src('./lib/*.js')
  .pipe(cache.clear());

  // Or, just call this for everything
  cache.clearAll();

});

然后将此任务添加到您的观察者