javascript - tutorial - ¿Cómo incluir archivos revisados ​​en.html después de usar gulp-rev?

que es gulp sass

Question

Así que he creado esta tarea en gulp:

''use strict'';
var gulp = require(''gulp'');
var gulpGlobals = require(''./_gulp-globals.js'');
var rev = require(''gulp-rev'');
var revReplace = require(''gulp-rev-replace'');
gulp.task(''gulp-rev'', function () {
var sources = gulpGlobals.src + ''/somefolder/**/*.js'';
var fileToInject = gulpGlobals.destination + ''/somefolder/script.js'';
var outputFolderJs = ''webapp/dist/somefolder'';
return gulp.src(fileToInject)
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(outputFolderJs));
});

Y crea un archivo adicional llamado así, por ejemplo: script-7c58e79612.js

¿Pero cómo lo script.js en mi archivo html en lugar de script.js ? Por lo tanto, por ejemplo, en lugar de esta línea en mi file.html :

<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script.js</script>

Podría tener esto:

<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script-7c58e79612.js</script>

Answer 1

Necesitarás gulp-rev-replace para esto mientras intentabas, pero necesitas usarlo en tu archivo html en lugar de tu archivo de script. Por ejemplo, intente modificar sus tareas de esta manera:

var manifestFolder = ''webapp/dist/manifest'';
gulp.task("gulp-rev", function(){
var sources = gulpGlobals.src + ''/somefolder/**/*.js'';
var fileToInject = gulpGlobals.destination + ''/somefolder/script.js'';
var outputFolderJs = ''webapp/dist/somefolder'';
return gulp.src(fileToInject)
.pipe(rev())
.pipe(gulp.dest(outputFolderJs))
.pipe(rev.manifest()
.pipe(gulp.dest(manifestFolder));
})
gulp.task("revreplace", ["gulp-rev"], function() {
var manifest = gulp.src("./" + manifestFolder + "/rev-manifest.json");
var source = gulpGlobals.src + ''/somefolder/file.html'';
var outputFolderHtml = ''webapp/dist/somefolder'';
return gulp.src(source)
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(outputFolderHtml));
});

Este código se basa en el segundo ejemplo de la documentación de uso de gulp-rev-replace . Más documentación y ejemplos también están en esa página.

Answer 2

Puede evitar el paso del manifiesto intermedio al cambiar en el complemento gulp-rev-all . Combina recursos de revisión y reescribe referencias en un solo paso.

var gulp = require(''gulp'');
var RevAll = require(''gulp-rev-all'');
function build() {
var srcFiles = ''some/src/folder/**'';
var buildFolder = ''some/build/folder'';
gulp.src(srcFiles)
.pipe(RevAll.revision({ dontRenameFile: [''.html''] }))
.pipe(gulp.dest(buildFolder));
}
gulp.task(''build'', build);

Documentación:
https://github.com/smysnk/gulp-rev-all

Nota:
El proyecto es controvertido porque combina dos funciones en un solo plugin Gulp. Sin embargo, la combinación de las funciones está garantizada en este caso porque la combinación resuelve un problema de huevo y pollo.

Editado:
Código de ejemplo actualizado para admitir la última versión del complemento.