cssgulpversioninggulp-rev

Gulp revisioning with gulp-rev, gulp-rev-replace, gulp-rev-css-url


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;

Solution

  • I used gulp-rev-all instead:

    https://github.com/smysnk/gulp-rev-all

    Which worked :)