javascriptangularjsgulpgulp-rev

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


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>

Solution

  • 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.