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

后端 未结 2 819
伪装坚强ぢ
伪装坚强ぢ 2021-02-15 01:09

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:

2条回答
  •  挽巷
    挽巷 (楼主)
    2021-02-15 01:54

    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

提交回复
热议问题