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

J'utilise lampée avec browserSync avec la prochaine config (simplifié):Comment gérer le cache du navigateur lors de l'utilisation de 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 change ont été poussés à l'intérieur .pipe(browserSync.reload({stream: true}))compile_styles tâche, mais comme vous pouvez le voir pour .js les fichiers que j'ai utilisé simples browserSync.reload et il ne fonctionne pas parce que le navigateur (chrome 57.0.2987.133 (64 bits)) charge les fichiers statiques de son cache interne, j'ai donc besoin de recharger 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, etc. Alors, comment gérer le cache du navigateur lors de l'utilisation de browserSync?

Source

2017-04-13 Roman Nazarkin

Pourquoi n'ajoutez-vous pas {stream: true} à votre appel de js watcher browserSync.reload? Je n'ai pas besoin de faire un rechargement supplémentaire au-delà de celui appelé en gulp. Vos fichiers image devraient pouvoir être réinjectés dans la page sans rechargement/rafraîchissement du tout. – Mark

@Mark hmmm ... merci pour l'idée, j'ai réécrit ma config un peu et ça semble fonctionner correctement maintenant. Je posterai la réponse sous peu. –

Une solution a été trouvée à l'aide du paramètre {stream: true} de la fonction browserSync.reload, mais pour que cela fonctionne, certaines modifications sont nécessaires. Alors, comment il était:

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

et comment il ressemble maintenant:

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

Source

2017-04-14 08:31:58

thx pour votre question et votre réponse. Mon problème n'est pas complètement résolu. L'injection fonctionne correctement, mais lorsque je recharge une page ou que je la déplace vers une autre page: Chrome (57) utilise toujours une ancienne feuille de style. Un ** rechargement dur ** résout cela. J'envisage également de donner aux stylesheets une chaîne/horodatage aléatoire pour que Chrome charge réellement la chose. –

@ FrankLämmer même ici, avez-vous réussi à résoudre ce problème? Ma solution était de changer le port du proxy à autre chose. Cela fonctionne, cependant, je vais devoir choisir un nouveau port proxy pour chaque projet jusqu'à ce que je trouve autre chose. – Gus

@Gus désolé non (pas si important ici en ce moment). Je considère que "HTTP cache-control"/ETag pourrait jouer un rôle ici. peut-être [pas] (https://github.com/browsersync/browser-sync/issues/657). –

En devtools chrome (CTRL I MAJ), dans onglet Réseau, vous disposez d'un cache case Désactiver. Ça devrait marcher.

Source

2017-04-13 14:57:17

Comme je sais, ce paramètre ne fonctionne que lorsque devtools est ouvert, donc il ne résout pas complètement un problème. –

pourquoi ne pas utiliser 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 veilleur

Source

2018-02-12 17:23:05 AbdelhakAj

Je ne connaissais pas ce plugin Gulp, merci! –

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

Répondre

Questions connexes