GulpJS: How to rev images and then update their refs in css files?

Question

gulp.task('usemin', function () {

  return gulp.src(path.src + '*.html')
    .pipe(usemin({
      assetsDir: 'src',
      css: [ minifyCss(), 'concat', rev()],
      js: [uglify(), rev()],
      images: [rev()]
    }))
    .pipe(gulp.dest(path.dist));
});

It does not work on the images.

Answer 1

The philosophy of gulp-rev-all is to me a good way to see asset revisioning. It's very well explained in their Readme that the hash should also take into account the reference(s) between revisioned files.

I've mocked up a little example that minify an image and a css file which use a background url property to see the revision of the new image path.

gulp.task('image', function () {
  return gulp.src('image.jpeg')
    .pipe(img({ progressive: false }))
    .pipe(gulp.dest('tmp'));
});

gulp.task('css', function () {
  return gulp.src('test.css')
    .pipe(css())
    .pipe(gulp.dest('tmp'));
});

gulp.task('rev', ['image', 'css'], function () {
  return gulp.src('tmp/**')
    .pipe(rev())
    .pipe(gulp.dest('dist'));
});

I've removed all the fancy stuff to be more clear, but you can see the whole example here.