我正在使用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时处理浏览器缓存呢?
4条答案
按热度按时间7hiiyaii1#
你为什么不用吞缓存
然后将此任务添加到您的观察程序
7bsow1i62#
在chrome devtools(CTRL MAJ I)中,在 Network 选项卡中,您有一个 Disable cache 复选框。它应该可以工作。
7tofc5zh3#
通过使用
browserSync.reload
函数的{stream: true}
参数找到了一个解决方案,但要使其工作,需要进行一些修改。以及它现在的样子:
13z8s7eq4#
这解决了我的问题:
1-安装gulp-cache npm软件包
npm i gulp-cache
2-在gulpfile.js中添加以下行以要求此包:
const cache = require('gulp-cache');
3-现在,您需要创建一个使用gulp-cache清除该高速缓存的gulp任务:
4-最后更新您的手表任务,我将分享我的作为参考:
如果您仔细观察,您会注意到我gulp.watch通过将clear cache添加到更改后要运行的函数列表中来更改我的每个www.example.com:
请让我知道这是否适合你!