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

Question

我正在使用带有下一个配置的browserSync gulp(简化):

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

在chrome devtools（CTRL MAJ I）的“ 网络”标签中，您有一个“ 禁用缓存”复选框。它应该工作。

Answer 2

你为什么不使用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();

});

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

Answer 3

通过使用函数{stream: true}参数找到了解决方案browserSync.reload，但要使其工作，需要进行一些更改。那是怎样的：

gulp.watch('/public/js/**/*.js').on('change', browserSync.reload);

以及它现在的样子：

gulp.watch('/public/js/**/*.js').on('change', function(e) {
    return gulp.src(e.path)
        .pipe(browserSync.reload({stream: true}));
});