使用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 更改在 compile_styles 任务中通过 .pipe(browserSync.reload({stream: true})) 推送，但是正如您所看到的 .js 文件，我使用了简单的 browserSync.reload 并且它不起作用，因为浏览器(chrome 57.0.2987.133 (64-bit)) 从它的内部缓存加载静态文件所以我需要额外的重新加载来刷新缓存并强制浏览器加载这些文件再次.

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

Answer 1

在 chrome devtools (CTRL MAJ I) 中，在 Network 选项卡中，您有一个 Disable cache 复选框。它应该有效。

Answer 2

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

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

Answer 3

你为什么不使用 gulp-缓存

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 4

这解决了我的问题：

1-安装gulp-缓存npm包

npm i gulp-cache

2-通过添加以下行在您的 gulpfile.js 中要求此包：

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

3- 现在您要创建一个 gulp 任务，使用 gulp-cache:

清除缓存

function clearCache(done) {
  return cache.clearAll(done);
}

4- 最后更新你的监视任务，我把我的分享给大家参考：

function watch() {
  browserSync.init({
    server: './dist',
  });
  gulp.watch('sass/**/*.scss', gulp.parallel(styles));
  gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload);
  gulp.watch('index.html', gulp.parallel(copyHtml));
  gulp.watch('*.html').on('change', browserSync.reload);
  gulp.watch('js/**/*.js', gulp.series(lint, scripts));
  gulp.watch('js/**/*.js').on('change', clearCache, browserSync.reload);
  gulp.watch('img/**/*.jpg', gulp.series(copyImages));
  gulp.watch('img/**/*').on('change', clearCache, browserSync.reload);
}

如果你仔细观察，你会发现我更改了每个 gulp.watch，方法是在更改后将清除缓存添加到运行的函数列表中：

gulp.watch('sass/**/*.scss', gulp.parallel(styles));
gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload);

请告诉我这是否适合您！

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

How to deal with browser cache while using browserSync?

browser-cache

gulp

browser-sync