web-dev-qa-db-fra.com

Comment gérer le cache du navigateur lors de l'utilisation de browserSync?

J'utilise gulp avec browserSync avec la configuration suivante (simplifiée):

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

Les modifications SCSS étant poussées via .pipe(browserSync.reload({stream: true})) dans la tâche compile_styles, mais comme vous pouvez le constater pour les fichiers .js, j’utilisais un browserSync.reload simple et cela ne fonctionnait pas car le navigateur ( chrome 57.0.2987.133 (64-bit) ) charge les fichiers statiques depuis c'est le cache interne donc je dois faire un rechargement supplémentaire pour vider ce cache et forcer le navigateur à charger à nouveau ces fichiers.

La même chose peut être liée à des ressources statiques telles que des images, des polices de caractères, etc. Alors, comment gérer le cache du navigateur tout en utilisant browserSync?

gulpbrowser-cachebrowser-sync
7
Roman Nazarkin

Solution trouvée en utilisant le paramètre {stream: true} de la fonction browserSync.reload, mais pour que cela fonctionne, certaines modifications sont nécessaires. Alors comment c'était:

gulp.watch('/public/js/**/*.js').on('change', browserSync.reload);

et à quoi ça ressemble maintenant:

gulp.watch('/public/js/**/*.js').on('change', function(e) {
    return gulp.src(e.path)
        .pipe(browserSync.reload({stream: true}));
});
1
Roman Nazarkin

Dans chrome devtools (CTRL MAJ I), dans Réseau onglet, vous avez une Désactiver la mémoire cache . Ça devrait marcher.

4
Aurélien

pourquoi n'utilisez-vous pas 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();

});

puis ajoutez cette tâche à votre observateur

3
AbdelhakAj