web-dev-qa-db-fra.com

gulp: ajoute automatiquement le numéro de version à la demande pour empêcher le cache du navigateur

Je déploie mon projet en construisant des fichiers sources avec gulp directement sur le serveur. Pour éviter les problèmes de mise en cache, la meilleure pratique pourrait être d'ajouter un numéro unique pour demander une URL, voir: Empêcher la mise en cache du navigateur sur les mises à niveau d'applications Web ; 

Dans les référentiels npm, je n'ai pas pu trouver d'outil pour ajouter automatiquement le numéro de version à demander. Je demande si quelqu'un a déjà inventé un tel outil. 

L'implémentation possible pourrait être la suivante:

J'ai un fichier index.html dans le dossier src/, avec la balise de script suivante

 <script src="js/app.js<!-- %nocache% -->"></script>

Pendant la construction, il est copié dans le dossier dist/ et le commentaire est remplacé par le numéro d'auto-incrémentation.

 <script src="js/app.js?t=1234"></script>
javascriptnode.jsnpmgulp
13
Dan

Vous pouvez utiliser gulp-version-number pour cela. Il peut ajouter des numéros de version aux scripts, feuilles de style et autres fichiers liés de vos documents HTML, en ajoutant un argument aux URL. Par exemple:

<link rel="stylesheet" href="main.css">

devient:

<link rel="stylesheet" href="main.css?v=474dee2efac59e2dcac7bf6c37365ed0">

Vous n'avez même pas besoin de spécifier un espace réservé, comme vous l'avez montré dans votre exemple d'implémentation. Et c'est configurable.

Exemple d'utilisation:

const $ = gulpLoadPlugins();
const versionConfig = {
  'value': '%MDS%',
  'append': {
    'key': 'v',
    'to': ['css', 'js'],
  },
};

gulp.task('html', () => {
  return gulp.src('src/**/*.html')
    .pipe($.htmlmin({collapseWhitespace: true}))
    .pipe($.versionNumber(versionConfig))
    .pipe(gulp.dest('docroot'));
});
18
Serrano

Vous pouvez utiliser le module gulp-rev. Cela va ajouter un numéro de version aux fichiers, la version est un hachage du contenu du fichier, elle ne changera donc que si le fichier change. 

Vous produisez ensuite un fichier manifeste contenant le mappage entre le fichier, par exemple. Scripts.js à Scripts-8wrefhn.js.

Utilisez ensuite une fonction d'assistance lors du renvoi du contenu de la page pour mapper les valeurs correctes. 

J'ai utilisé le processus ci-dessus. Cependant, il existe un autre module gulp-rev-all qui est une extension forkée de gulp-rev qui en fait un peu plus, par exemple. mise à jour automatique des références de fichiers dans les pages.

Documentation ici:

4
Jack

Il semble que vous ayez plusieurs options.

http://www.npmjs.com/package/gulp-cachebusthttps://www.npmjs.com/package/gulp-buster

J'espère que cela t'aides.

3
Chris W. Burke

J'ai travaillé sur l'écriture d'une expression rationnelle, ce qui est bien utilisé avec [gulp-replace][1].

Veuillez trouver le code ci-dessous. Vous trouverez ci-dessous un code rapide pour l’image et css pour le cadre codeigniter des fichiers vues. Mais cela devrait fonctionner correctement pour tous les types de fichiers en fonction du dossier source spécifié correctement. 

Vous pouvez personnaliser le code selon votre utilisation.

Vous pouvez appeler les tâches en même temps, en utilisant gulp default ou une tâche individuelle à la fois.

'use strict';

var gulp = require('gulp');
var replace = require('gulp-replace');

function makeid() {
  return (Math.random() + 1).toString(36).substring(7);
}



gulp.task('versioningCss', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.css\?(_v=.+&)*(.*)/g, '$1.css?_v='+makeid()+'&$3'))
    .pipe(replace(/(.*)\.css\"(.*)/g, '$1.css?_v='+makeid()+'"$2'))
    .pipe(replace(/(.*)\.css\'(.*)/g, '$1.css?_v='+makeid()+'\'$2'))
    .pipe(gulp.dest('application/modules'));
});

gulp.task('versioningJs', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.js\?(_v=.+&)*(.*)/g, '$1.js?_v='+makeid()+'&$3'))
    .pipe(replace(/(.*)\.js\"(.*)/g, '$1.js?_v='+makeid()+'"$2'))
    .pipe(replace(/(.*)\.js\'(.*)/g, '$1.js?_v='+makeid()+'\'$2'))
    .pipe(gulp.dest('application/modules'));
});

gulp.task('versioningImage', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\?(_v=.+&)*(.*)/g, '$1.$2?_v='+makeid()+'&$4'))
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\"(.*)/g, '$1.$2?_v='+makeid()+'"$3'))
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\'(.*)/g, '$1.$2?_v='+makeid()+'\'$3'));
});

gulp.task('default', [ 'versioningCss', 'versioningJs', 'versioningImage']);
1
Satys