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文件一样，我使用了简单的var obj1 = { o1p1: "o1p1_Value", o1p2: "o1p2_Value" }; var obj2 = { o2p1: "o2p1_Value", o2p2: obj1 }; var obj3 = flatten.flatten(obj2);，因为浏览器（< em> chrome 57.0.2987.133（64位））从其内部缓存中加载静态文件，因此我需要进行额外的重新加载以刷新该缓存并强制浏览器再次加载这些文件。

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

Answer 1

In chrome devtools (CTRL MAJ I), in Network tab, you have a Disable cache checkbox. It should work.

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

Answer 4

这解决了我的问题：

1- 安装 gulp-cache npm 包

npm i gulp-cache

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

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

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

请告诉我这是否适合您！

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

4 个答案: