gulp-rev-replace

Rewrite occurrences of filenames which have been renamed by gulp-rev

Install

1$ npm install --save-dev gulp-rev-replace

Usage

Pipe through a stream which has both the files you want to be updated, as well as the files which have been renamed.

For example, we can use gulp-useref to concatenate assets in an index.html, and then use gulp-rev and gulp-rev-replace to cache-bust them.

1var gulp = require('gulp');
2var rev = require('gulp-rev');
3var revReplace = require('gulp-rev-replace');
4var useref = require('gulp-useref');
5var filter = require('gulp-filter');
6var uglify = require('gulp-uglify');
7var csso = require('gulp-csso');
8
9gulp.task("index", function() {
10  var jsFilter = filter("**/*.js", { restore: true });
11  var cssFilter = filter("**/*.css", { restore: true });
12  var indexHtmlFilter = filter(['**/*', '!**/index.html'], { restore: true });
13
14  return gulp.src("src/index.html")
15    .pipe(useref())      // Concatenate with gulp-useref
16    .pipe(jsFilter)
17    .pipe(uglify())             // Minify any javascript sources
18    .pipe(jsFilter.restore)
19    .pipe(cssFilter)
20    .pipe(csso())               // Minify any CSS sources
21    .pipe(cssFilter.restore)
22    .pipe(indexHtmlFilter)
23    .pipe(rev())                // Rename the concatenated files (but not index.html)
24    .pipe(indexHtmlFilter.restore)
25    .pipe(revReplace())         // Substitute in new filenames
26    .pipe(gulp.dest('public'));
27});

It is also possible to use gulp-rev-replace without gulp-useref:

1var rev = require("gulp-rev");
2var revReplace = require("gulp-rev-replace");
3gulp.task("revision", ["dist:css", "dist:js"], function(){
4  return gulp.src(["dist/**/*.css", "dist/**/*.js"])
5    .pipe(rev())
6    .pipe(gulp.dest(opt.distFolder))
7    .pipe(rev.manifest())
8    .pipe(gulp.dest(opt.distFolder))
9})
10
11gulp.task("revreplace", ["revision"], function(){
12  var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");
13
14  return gulp.src(opt.srcFolder + "/index.html")
15    .pipe(revReplace({manifest: manifest}))
16    .pipe(gulp.dest(opt.distFolder));
17});

API

revReplace(options)

options.canonicalUris

Type: boolean

Default: true

Use canonical Uris when replacing filePaths, i.e. when working with filepaths with non forward slash (/) path separators we replace them with forward slash.

options.replaceInExtensions

Type: Array

Default: ['.js', '.css', '.html', '.hbs']

Only substitute in new filenames in files of these types.

options.prefix

Type: string

Default: ``

Add the prefix string to each replacement.

options.manifest

Type: Stream (e.g., gulp.src())

Read JSON manifests written out by rev. Allows replacing filenames that were reved prior to the current task.

options.modifyUnreved, options.modifyReved

Type: Function

Modify the name of the unreved/reved files before using them. The filename is passed to the function as the first argument.

For example, if in your manifest you have:

1{"js/app.js.map": "js/app-98adc164.js.map"}

If you wanted to get rid of the js/ path just for .map files (because they are sourcemaps and the references to them are relative, not absolute) you could do the following:

1function replaceJsIfMap(filename) {
2    if (filename.indexOf('.map') > -1) {
3        return filename.replace('js/', '');
4    }
5    return filename;
6}
7
8return gulp.src(opt.distFolder + '**/*.js')
9    .pipe(revReplace({
10        manifest: manifest,
11        modifyUnreved: replaceJsIfMap,
12        modifyReved: replaceJsIfMap
13    }))
14    .pipe(gulp.dest(opt.distFolder));

Contributors

• Chad Jablonski
• Denis Parchenko
• Evgeniy Vasilev
• George Song
• Håkon K. Eide
• Juan Lasheras
• Majid Burney
• Simon Ihmig
• Vincent Voyer
• Bradley Abrahams

License

MIT © James K Nelson