web-dev-qa-db-ja.com

browserSyncの使用中にブラウザキャッシュを処理する方法は？

私は次の設定（簡略化）でbrowserSyncでgulpを使用しています：

_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-bit））は内部キャッシュから静的ファイルをロードするため、追加のリロードを行ってそのキャッシュをフラッシュし、ブラウザにそのファイルを再度ロードさせる必要があります。

同じことが、画像、フォントなどの静的リソースに関連している可能性があります。では、browserSyncを使用しているときにブラウザキャッシュをどのように処理するのですか？

gulpbrowser-cachebrowser-sync
11
Roman Nazarkin

{stream: true}関数のbrowserSync.reloadパラメータを使用して解決策を見つけましたが、それを機能させるには、いくつかの変更が必要です。それがどうだったか：

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}));
});
2
Roman Nazarkin

chrome devtools（CTRL MAJ I）のNetworkタブに、Disable cacheチェックボックスがあります。

5
Aurélien

どうしてgulp-cacheを使わないのですか

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

});

そして、このタスクをウォッチャーに追加します

5
AbdelhakAj