如何使用browserSync處理瀏覽器緩存？

我使用一飲而盡與browserSync旁邊配置（簡體）：如何使用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改變通過.pipe(browserSync.reload({stream: true}))被推內compile_styles任務，但你可以看到我用簡單的browserSync.reload.js文件，它不工作因爲瀏覽器（鉻57.0.2987.133（64位））從IT負載靜態文件的內部緩存，所以我需要作出更多的重載刷新高速緩存和力瀏覽器加載一遍文件。

同樣的事情可以與任何靜態資源，如圖像，字體等。那麼如何處理瀏覽器緩存，同時使用browserSync？

來源

2017-04-13 Roman Nazarkin

你爲什麼不把{stream：true}添加到你的js watcher browserSync.reload調用中？我不需要再進行一次額外的重新加載，超出了所謂的吞嚥。您的圖像文件應該能夠重新注入到頁面中，而無需重新加載/刷新。 – Mark

@Mark嗯......感謝這個想法，我已經重寫了一下我的配置，它現在似乎正常工作。我會很快發佈答案。 –

找到了解決方案，通過使用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})); 
});

來源

2017-04-14 08:31:58

thx爲您的問題和您的答案。我的問題沒有完全解決。注入工作正常，但是當我重新加載頁面或移動到另一頁面時：Chrome（57）仍然使用舊的樣式表呈現。 A **硬重載**解決了這個問題。我也在考慮給樣式表一個隨機的字符串/時間戳來誘使Chrome實際加載這個東西。 –

@FrankLämmer同樣在這裏，你是否設法解決這個問題？我的解決方案是將代理端口更改爲其他內容。它工作，但是，我需要爲每個項目選擇一個新的代理端口，直到我找到其他東西。 – Gus

@Gus對不起（現在不太重要）。我認爲「HTTP緩存控制」/ ETag可能在這裏發揮作用。也許[不]（https://github.com/browsersync/browser-sync/issues/657）。 –

在鉻devtools（CTRL MAJ我），在網絡選項卡，你有一個禁用緩存複選框。它應該工作。

來源

2017-04-13 14:57:17

據我所知，這個設置只在devtools打開時才起作用，所以它不能完全解決問題。 –

你爲什麼不使用一口緩存

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

});

，然後將此任務添加到您的守望者

來源

2018-02-12 17:23:05 AbdelhakAj

不知道這個gulp插件，謝謝！ –

如何使用browserSync處理瀏覽器緩存？

回答

相關問題