Wie revisionierte Dateien nach der Verwendung von gulp-rev in .html einbeziehen?

Question

Also habe ich diese Aufgabe in schluck erstellt:

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

Und es schafft zusätzliche Datei wie folgt beispielsweise genannt: script-7c58e79612.js

Aber wie dann kann ich es in meiner HTML-Datei enthalten statt script.js ? So Vordergrund Beispiel anstelle dieser Linie in meinem file.html:

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

ich könnte dies:

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

Answer 1

Sie würden gulp-rev-replace dafür brauchen, wie Sie versuchen, aber Sie brauchen, es zu benutzen auf Ihrem HTML-Datei anstelle Ihrer Skriptdatei. Versuchen Sie zum Beispiel Ihre Aufgaben wie diese zu modifizieren:

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

Dieser Code auf dem zweiten Beispiel der usage documentation von gulp-rev-replace basiert. Weitere Dokumentation und Beispiele finden Sie ebenfalls auf dieser Seite.

Answer 2

Sie können die Zwischenstufe manifest Schritt durch Austauschen im gulp-rev-all Plugin vermeiden. Es kombiniert Revisionsressourcen und überschreibt Referenzen in einem Schritt.

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

Dokumentation:
https://github.com/smysnk/gulp-rev-all

Hinweis:
Das Projekt ist umstritten, dass es zwei Funktionen in einem Gulp Plugin kombiniert. Die Kombination der Funktionen ist in diesem Fall jedoch gerechtfertigt, da die Kombination ein Hühner-Ei-Problem löst.

Edited:
Aktualisiert Beispielcode neueste Version von Plugins zu unterstützen.