使用 gulp 和浏览器同步强制刷新答案

【问题标题】：Refresh forced with gulp and browser-sync使用 gulp 和浏览器同步强制刷新
【发布时间】：2018-06-25 14:12:19
【问题描述】：

我使用浏览器同步和 gulp 在项目中的每个文件更改时重新加载我的页面。它成功了一半：有时我必须按 ctrl+F5 才能显示页面上的更改，然后我只需要保存以进行下一次更改，并且浏览器同步重新加载就足够了。这是我的代码：

var cache = require('gulp-cache');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
    browserSync.init({
        injectChanges: true,
        proxy: "http://localhost:8888/project/source/"
    });
    gulp.watch("source/**/*").on("change", function(e) {
        cache.clearAll();
        return gulp.src(e.path)
            .pipe(browserSync.reload({stream: true}));
    }); 
});

我希望浏览器在我的项目（每个文件夹/子文件夹中的每个文件）的每次更改时都刷新。

我认为将流参数设置为 true 找到另一个主题可以完成这项工作，但我仍然遇到同样的问题......而且 gulp clear cache 并没有改变任何东西。

每次保存时，我的页面都会刷新，但更改并不总是显示，所以我必须使用 ctrl+F5 进行硬刷新。

这是一个小项目，这就是我不想使用 webpack 的原因。它在 MAMP 服务器上。

有什么想法吗？

【问题讨论】：

标签： gulp refresh browser-sync

【解决方案1】：

最可能的罪魁祸首是资产缓存。硬重新加载会从浏览器中删除所有缓存的数据，还会取消注册服务工作者、indexeddb 等。

进入 devtools，单击应用程序选项卡，选择 service worker，然后选中“重新加载时更新”框。我很确定这会在页面刷新时重新加载。

【讨论】：