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

【问题标题】：How to deal with browser cache while using browserSync?使用browserSync时如何处理浏览器缓存？
【发布时间】：2017-09-09 18:21:09
【问题描述】：

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

同样的东西可以和任何静态资源相关，比如图片、字体等。那么在使用browserSync时如何处理浏览器缓存呢？

【问题讨论】：

为什么不将 {stream: true} 添加到您的 js 观察者 browserSync.reload 调用中？除了在 gulp 中调用的内容之外，我不必进行额外的重新加载。您的图像文件应该能够重新注入页面而无需重新加载/刷新。
@Mark hmmm...感谢您的想法，我已经稍微重写了我的配置，现在它似乎可以正常工作。我会尽快发布答案。

标签： gulp browser-cache browser-sync

【解决方案1】：

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

【讨论】：

据我所知，此设置仅在 devtools 打开时有效，因此并不能完全解决问题。

【解决方案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}));
});

【讨论】：

感谢您的问题和答案。我的问题还没有完全解决。注入工作正常，但是当我重新加载页面或移动到另一个页面时：Chrome（57）仍然使用旧样式表呈现。 硬重新加载解决了这个问题。我也在考虑给样式表一个随机字符串/时间戳来欺骗 Chrome 实际加载东西。
@FrankLämmer 也一样，你解决了吗？我的解决方案是将代理端口更改为其他端口。它可以工作，但是，我需要为每个项目选择一个新的代理端口，直到我找到其他东西。
@Gus 抱歉，不（现在在这里不太重要）。我认为“HTTP 缓存控制”/ETag 可能在这里发挥作用。也许not.
@FrankLämmer @Gus 用gulp-cache 插件查看 AbdelhakAj 的答案，可能解决了这个问题。

【解决方案3】：

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

});

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

【讨论】：

如果有像我这样的其他 gulp noobs 遇到此问题：（1）我必须安装 gulp-cache 版本 gulp.watch(['./**/*.{scss,css,html,py,js}'], ['clearCache', reload]);

【解决方案4】：

这解决了我的问题：

1- 安装 gulp-cache npm 包

npm i gulp-cache

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

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

3- 现在你想创建一个使用 gulp-cache 清除缓存的 gulp 任务：

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

如果这对你有用，请告诉我！

【讨论】：