Can't get gulp-rev-replace working with gulp-useref

Question

Continuing my previous question - but this time is the next step: getting file revisions to work.

I'm working through johnpapa's course on automation with Gulp and seem to hit another wall (that's what you get when you try to adapt a concise course to a different file structure :P ).

Basically, the issue is that I do get files named with a revision, but those names do not get into the end-result test.jsp, and I can't figure out why...

This is the task (the minification is omitted for brevity, but it works fine with the file revisioning):

gulp.task('build-dev', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.revReplace({modifyUnreved: replaceDirectory, modifyReved: replaceDirectory}))
        .pipe(gulp.dest(config.indexLocation))
        .pipe($.rev.manifest())
        .pipe(gulp.dest(config.indexLocation))
        ;
});

inject is the task that injects css and js references to the index file (works correctly), $ is require('gulp-load-plugins')({lazy: true}) and config.indexFile is index.jsp.

The replaceDirectory function is (used since the rev-manifest generates full pathnames):

function replaceDirectory(path) {

    var strToReplace = '../..';
    var strToReplaceWith = process.cwd().replace(/\\/g, '/') + '/WebContent';

    if (path) {
        return path.replace(strToReplace, strToReplaceWith);
    } else {
        return path;
    }
}

My file structure (unlike the one in the course) is:

- ModuleDir
    - dist
        - css
            - lib.css
            - app.css
        - fonts
        - images
        - js
            - lib.js
            - app.js
    - css
    - js
    - web-app
        - InnerDir
            - index.jsp
            - test.jsp
    - package.json, bower.json, etc. (all the required files)

Basically, index.jsp is processed for CSS and JS library and application assets, which are minified and concatenated into lib.css, lib.js, app.css and app.js. Later all these are injected into a copy of index.jsp which is called test.jsp.

The asset gathering, concatenation, injection works and file revisions on disk work splendidly. The update of file names in test.jsp- not so much...

Any ideas or pointers will be appreciated.

Answer 1

You have to add replaceInExtensions: '.jsp' to your options for revReplace().

I had this problem for a day and a half before I looked at the plugin code and figured it out. I'm using .php files. The documentation does say you need to do this but it's easily missed.

Hope it helps.

Answer 2

In the meantime (unless I find the source of the problem or any of you can help), I've chosen a different cache busting scheme:

gulp.task('build-dev', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cb = Math.random();

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.replace('dist/css/lib.css', 'dist/css/lib.css?cb=' + cb))
        .pipe($.replace('dist/css/app.css', 'dist/css/app.css?cb=' + cb))
        .pipe($.replace('dist/js/lib.js', 'dist/js/lib.css?cb=' + cb))
        .pipe($.replace('dist/js/app.js', 'dist/js/app.js?cb=' + cb))
        .pipe(gulp.dest(config.indexLocation))
        ;
});

It's not the answer I want, but it is an answer I need. :)