时间戳

首页 > 解决方案 > 使用 gulp 和浏览器同步强制刷新

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

问题描述

我使用浏览器同步和 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 服务器上。

任何想法 ？

标签： gulprefreshbrowser-sync

解决方案

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

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

推荐阅读