gulp: agrega automáticamente el número de versión para solicitar la prevención del caching del browser

Implemento mi proyecto construyendo files fuente con un gulp en el server. Para evitar problemas de almacenamiento en caching, la mejor práctica podría ser agregar un número único para solicitar la URL, ver: evitar el almacenamiento en caching del browser en las actualizaciones de aplicaciones web ;

En repositorys npm, no pude encontrar una herramienta para agregar automáticamente el número de versión para solicitar. Pregunto si alguien ha inventado esa herramienta antes.

La posible implementación podría ser la siguiente:

Tengo un file index.html en src/ folder, con la siguiente label de secuencia de commands

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

Durante la compilation, se copy a dist/ folder, y el comentario se reemplaza por el número de autoincrement

  <script src="js/app.js?t=1234"></script> 

Puedes usar gulp-version-number para esto. Puede agregar numbers de versión a scripts, hojas de estilo y otros files vinculados en sus documentos HTML, agregando un argumento a las URL. Por ejemplo:

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

se convierte en:

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

Ni siquiera tiene que especificar un marcador de position, como mostró en su implementación de ejemplo. Y es configurable.

Ejemplo de uso:

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

Parece que puede tener bastantes opciones.

https://www.npmjs.com/package/gulp-cachebust https://www.npmjs.com/package/gulp-buster

Espero que esto ayude.

Puedes usar el module gulp-rev . Esto agregará un número de versión a los files, la versión es un hash del contenido del file, por lo que solo cambiará si el file cambia.

A continuación, muestra un file de manifiesto que contiene la asignación entre el file, por ejemplo, Scripts.js a Scripts-8wrefhn.js.

Luego, use una function auxiliar al devolver el contenido de la página para asignar los valores correctos.

He usado el process anterior. Sin embargo, hay otro module gulp-rev-all que es una extensión bifurcada de gulp-rev que hace un poco más, por ejemplo, la actualización automática de references de files en páginas.

Documentación aquí: