How do I replace the filenames listed in index.html with the output of gulp-rev?

Question

I\'m using gulp-rev to build static files that I can set to never expire. I\'d like to replace all references to the generated files in index.html to these renamed files, but I

Answer 1

I've just written a gulp plugin to do this, it works especially well with gulp-rev and gulp-useref.

The usage will depend on how you've set things up, but it should look something like:

gulp.task("index", function() {
  var jsFilter = filter("**/*.js");
  var cssFilter = filter("**/*.css");

  return gulp.src("src/index.html")
    .pipe(useref.assets())
    .pipe(jsFilter)
    .pipe(uglify())             // Process your javascripts
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(csso())               // Process your CSS
    .pipe(cssFilter.restore())
    .pipe(rev())                // Rename *only* the concatenated files
    .pipe(useref.restore())
    .pipe(useref())
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('public'));
});