I am trying to re-write references to my versioned image files with gulp-rev, gulp-rev-replace and gulp-rev-css-url.
I have managed to revision the files and merge the manifests with the following gulp code:
gulp.task('revision', function(callback){
runSequence('revision-images', 'revision-scripts', 'revision-css', 'revreplace', callback);
});
gulp.task('revision-scripts', function(){
return gulp
.src('./build/*.js')
.pipe(rev())
.pipe(gulp.dest('./dist/build'))
.pipe(rev.manifest({
base: process.cwd(),
merge: true
}))
.pipe(gulp.dest('./dist'));
});
gulp.task('revision-css', function(){
return gulp
.src('./build/*.css')
.pipe(rev())
.pipe(override())
.pipe(gulp.dest('./dist/build'))
.pipe(rev.manifest({
base: process.cwd(),
merge: true
}))
.pipe(gulp.dest('./dist'));
});
gulp.task('revision-images', function(){
return gulp
.src(['./static-assets/img/*.*'])
.pipe(rev())
.pipe(gulp.dest('./dist/static-assets/img'))
.pipe(rev.manifest({
base: process.cwd(),
merge: true
}))
.pipe(gulp.dest('./dist'));
});
gulp.task("revreplace", function(){
var manifest = gulp.src('./dist/rev-manifest.json');
return gulp.src('./index.html')
.pipe(revReplace({
manifest: manifest
}))
.pipe(gulp.dest('./dist'));
});
This generates a merged manifest file in the correct place and correctly versioned static assets also.
The issue is that It does not re-write the references to the versioned images in the versioned CSS.
When running 'revision-css'
I do see an updated reference to another CSS import but the image references remain those of the un-versioned files.
I used the run-sequence package to force the versioning and manifest merges first so that the replace would execute last but I am not sure that run sequence is the issue.
My images are referenced normally like so in the CSS:
background: url("../static-assets/img/nav-logo.png") no-repeat;