How to include modified files in .html after using gulp -rev?

Question

So, I created this task in 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)); }); 

And it creates an additional file named like this, for example: script-7c58e79612.js

But how to include it in your html file instead of script.js ? So, instead of an example, instead in my file.html :

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

I could do this:

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

Answer 1

For this you will need gulp-rev-replace as you tried, but you need to use it in your html file instead of your script file. For example, try changing your tasks as follows:

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

This code is based on the second sample documentation for using gulp-rev-replace . More detailed documentation and examples are also on this page.

Answer 2

You can avoid the middle step of the manifest by replacing the gulp-rev-all plugin in the plugin. It combines asset auditing and link rewriting in one step.

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

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

Note:
The project is controversial in that it combines two functions into one Gulp plugin. However, the combination of functions in this case is justified, because the combination solves the problem with the chicken and the egg.

Edited by:
Updated sample code to support the latest version of the plugin.