这是我设置的 Gulp 任务。它连接、缩小和重命名一堆 css 文件。
gulp.task('process-css', function() {
var files = [
'themes/rubbish_taxi/css/bootstrap.css',
'themes/rubbish_taxi/css/custom.css',
'themes/rubbish_taxi/css/responsive.css',
'themes/rubbish_taxi/css/jquery.fancybox.css'
];
return gulp.src(files)
.pipe(sourcemaps.init())
.pipe(concat("main.css"))
.pipe(minifyCSS())
.pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(sourcemaps.write('sourcemaps/'))
.pipe(gulp.dest('themes/my_theme/css/dist/'));
});
问题是源文件中有硬编码的 img url(存在于 css/
中)所以当我处理这些文件然后将它们输出到子目录中时(css/dist/
),URL 被破坏,图像不显示在站点上(返回 404)。
如何让 Gulp 重写输出文件中的 img url 以解决此问题?
最佳答案
您可以使用诸如 gulp-replace ( https://www.npmjs.com/package/gulp-replace ) 之类的插件来替换任何给定文件中的任意字符串,它应该可以解决您的问题;)
关于javascript - 使用 Gulp 处理 css 文件时如何修复图像 url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30963462/