How to include revisioned files into .html after using gulp-rev?

Question

So I've 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 additional file named like this for example: script-7c58e79612.js

But how then do I include it in my html file instead of script.js ? So fore example instead of this line in my file.html:

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

I could have this:

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

Answer 1

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.

Answer 2

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.