How to include revisioned files into .html after using gulp-rev?
You would need gulp-rev-replace
for this as you were trying, but you need to use it on your html file instead of your script file. For example, try modifying your tasks like this:
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 example of the usage documentation of gulp-rev-replace
. More documentation and examples are also on that page.
You can avoid the intermediate manifest step by swapping in the gulp-rev-all
plugin. It combines revisioning assets and rewriting references into one step.
// Imports
const gulp = require('gulp');
const RevAll = require('gulp-rev-all');
// Tasks
const task = {
resourcify() {
const srcFiles = 'some/src/folder/**';
const buildFolder = 'some/build/folder';
return gulp.src(srcFiles)
.pipe(RevAll.revision({ dontRenameFile: ['.html'] }))
.pipe(gulp.dest(buildFolder));
}
};
// Gulp
gulp.task('resourcify', task.resourcify);
Documentation:
https://github.com/smysnk/gulp-rev-all
Note:
The project is controversial in that it combines two functions into one Gulp plugin. However, combining the functions is warranted in this case because the combination solves a chicken and egg problem.
Edited:
Updated example code to support latest version of plugin.