Cache bust background images in my CSS with Gulp without having to edit my SASS?

Question

I want to cache bust background images in my CSS. So if my original style is:

.one {
  background: url(image.png);
}

A string can be added:

Answer 1

You can use gulp-rev-all. It will be able to add hash to the files and rewrite them without the need to add any extra markup to your SASS file.

A very basic gulp file for the same would look like -

var gulp = require('gulp');
var sass = require('gulp-sass');
var RevAll = require('gulp-rev-all');

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

var revAll = new RevAll({dontRenameFile: ['index.html']});

gulp.src(['app.sass'])
.pipe(sass().on('error', sass.logError))
.pipe(revAll.revision())
.pipe(gulp.dest('build'));

gulp.src(['**.jpg','**.png','**.gif'])
.pipe(revAll.revision());

return gulp.src('index.html')
.pipe(revAll.revision())
.pipe(gulp.dest('build'));

});

Note: Used dontRenameFile option to exclude the html file from being revisioned

I have created a working example at https://github.com/pra85/gulp-sass-filerev