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 have confronted the same problem, I tried gulp-rev-all, but it has some path problem, not very free to use.

So I figure out an solution, use gulp-rev and gulp-replace:

At first I have a replace symbol in my html(js, css) files

in css files

background: url({{{img/logo.png}}})

Second after some compile task, use gulp-replace to replace all the static files reference:

take stylus compile in development as example:

gulp.task('dev-stylus', function() {
   return gulp.src(['./fe/css/**/*.styl', '!./fe/css/**/_*.styl'])
             .pipe(stylus({
               use: nib()
             }))
             .pipe(replace(/\{\{\{(\S*)\}\}\}/g, '/static/build/$1'))
             .pipe(gulp.dest('./static/build/css'))
             .pipe(refresh());
});

In production environment, use gulp-rev to generate rev-manifest.json

gulp.task('release-build', ['release-stylus', 'release-js', 'release-img'], function() {
  return gulp.src(['./static/build/**/*.css',
                   './static/build/**/*.js',
                   './static/build/**/*.png',
                   './static/build/**/*.gif',
                   './static/build/**/*.jpg'],
                   {base: './static/build'})
             .pipe(gulp.dest('./static/tmp'))
             .pipe(rev())
             .pipe(gulp.dest('./static/tmp'))
             .pipe(rev.manifest())
             .pipe(gulp.dest('./static'));
});

Then use gulp-replace to replace the refs in static files with rev-manifest.json:

gulp.task('css-js-replace', ['img-replace'], function() {
  return gulp.src(['./static/tmp/**/*.css', './static/tmp/**/*.js'])
             .pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
               var manifest = require('./static/rev-manifest.json');
               return '/static/dist/'+manifest[p1]
             }))
             .pipe(gulp.dest('./static/dist'));
});