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

des4xlb0  于 2022-12-08  发布在  Gulp
关注(0)|答案(4)|浏览(177)

我正在使用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位))从其内部缓存加载静态文件,因此我需要进行额外的重新加载以刷新该缓存并强制浏览器再次加载该文件。
同样的事情也可以与任何静态资源(如图像、字体等)相关。那么,如何在使用browserSync时处理浏览器缓存呢?

7hiiyaii

7hiiyaii1#

你为什么不用吞缓存

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

});

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

7bsow1i6

7bsow1i62#

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

7tofc5zh

7tofc5zh3#

通过使用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}));
});
13z8s7eq

13z8s7eq4#

这解决了我的问题:
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通过将clear cache添加到更改后要运行的函数列表中来更改我的每个www.example.com:

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

请让我知道这是否适合你!

相关问题