使用 gulp-rev、gulp-rev-replace、gulp-rev-css-url 进行 Gulp 修订答案

【问题标题】：Gulp revisioning with gulp-rev, gulp-rev-replace, gulp-rev-css-url使用 gulp-rev、gulp-rev-replace、gulp-rev-css-url 进行 Gulp 修订
【发布时间】：2016-03-22 08:47:02
【问题描述】：

我正在尝试使用 gulp-rev、gulp-rev-replace 和 gulp-rev-css-url 重写对我的版本化图像文件的引用。

我已设法修改文件并将清单与以下 gulp 代码合并：

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'));
});

这会在正确的位置生成一个合并的清单文件，并且还会生成正确版本的静态资产。

问题在于它不会在版本化 CSS 中重写对版本化图像的引用。

在运行 'revision-css' 时，我确实看到了对另一个 CSS 导入的更新引用，但图像引用仍然是未版本化文件的引用。

我使用 run-sequence 包来强制版本控制和清单首先合并，以便最后执行替换，但我不确定运行顺序是否是问题。

我的图片在 CSS 中通常是这样引用的：

background: url("../static-assets/img/nav-logo.png") no-repeat;

【问题讨论】：

标签： css gulp versioning gulp-rev

【解决方案1】：

我用 gulp-rev-all 代替：

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

哪个有效:)

【讨论】：

哇，是的。不那么挑剔了。