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

Question

我使用浏览器同步和 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}));
    }); 
});

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

我认为将流参数设置为 true 发现另一个主题可以完成这项工作，但我仍然遇到同样的问题...而且 gulp 清除缓存没有任何改变。

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

这是一个小项目，所以我不想使用 webpack。它在 MAMP 服务器上。

有什么想法吗？

Answer 1

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

进入 devtools，单击应用程序选项卡，select service worker，然后选中 "update on reload" 框。我很确定这会在页面刷新时重新加载。

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

Refresh forced with gulp and browser-sync

refresh

gulp

browser-sync