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

我正在使用gulp with browserSync with next config（简化）：

通过

.pipe（browserSync.reload（{stream:true}））

内部的

compile_styles

任务推送SCSS更改，但正如您看到的

.js

文件一样，我使用了简单的

browserSync.reload

，它无法工作，因为浏览器（chrome 57.0.2987.133（64位））从它的内部缓存加载静态文件，所以我需要进行额外的重新加载以刷新该缓存，并强制浏览器再次加载该文件

---

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

在chrome开发工具（CTRL-MAJ I）中，在网络选项卡中，您有一个禁用缓存复选框。它应该可以工作。

通过使用

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

---

你为什么不使用快速缓存呢

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

});

---

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

这解决了我的问题：

1-安装gulp cache npm包

npm i吞咽缓存

2-通过添加以下行，在gulpfile.js中需要此包：

const cache=require（'gulp-cache'）

3-现在您要创建一个使用gulp cahce扫描缓存的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);
}

如果仔细观察，您会注意到我通过在更改后要运行的函数列表中添加clear cache来更改我的每一个gulp.watch：

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

请让我知道这是否适合你
 正如我所知，此设置仅在devtools打开时起作用，因此它不能完全解决问题。为什么不将{stream:true}添加到js watcher browserSync.reload调用中？我不需要做额外的重新加载超过所谓的“吞咽”。您的图像文件应该能够在不重新加载/刷新的情况下重新注入页面。@Mark hmmm。。。谢谢你的想法，我已经重写了我的配置一点，它似乎是正确的工作现在。我将很快发布答案。谢谢你的问题和答案。我的问题还没有完全解决。注入工作正常，但当我重新加载一个页面或移动到另一个页面时：Chrome（57）仍然使用旧样式表进行渲染。硬重新加载可解决此问题。我也在考虑给样式表一个随机的字符串/时间戳，以欺骗Chrome实际加载这个东西。@FrankLämmer这里也是，你解决了这个问题吗？我的解决方案是将代理端口更改为其他端口。它可以工作，但是，我需要为每个项目选择一个新的代理端口，直到我找到其他端口为止。@Gus抱歉，没有（现在这里不太重要）。我认为“HTTP Cache控件”/ETAG可能在这里起作用。也许。@FrankLämmer@Gus使用
gulp cache
插件检查AbdelhakAj的答案，可能解决了这个问题。如果有任何其他像我这样的gulp noob遇到这个问题：（1）我必须安装gulp cache版本<1.0才能使用这个导入方法。（2） “将此任务添加到您的观察者”表示观察者的第二部分是要执行的操作列表，如下所示：
gulp.watch（['/***.{scss，css，html，py，js}'，['clearCache'，reload]）
gulp.watch('sass/**/*.scss', gulp.parallel(styles));
gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload);