我正在尝试使用 gulp-rev、gulp-rev-replace 和 gulp-rev-css-url 重写对我的版本化图像文件的引用。
我已成功修改文件并将 list 与以下 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'));
});
这会在正确的位置生成合并的 list 文件,并生成正确版本的静态 Assets 。
问题在于它不会在版本化 CSS 中重写对版本化图像的引用。
运行'revision-css'
时,我确实看到了对另一个CSS导入的更新引用,但图像引用仍然是未版本化文件的引用。
我使用运行序列包强制首先进行版本控制和 list 合并,以便替换最后执行,但我不确定运行序列是问题所在。
我的图像通常像 CSS 中那样被引用:
background: url("../static-assets/img/nav-logo.png") no-repeat;
最佳答案
关于css - 使用 gulp-rev、gulp-rev-replace、gulp-rev-css-url 进行 Gulp 修订,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34308238/