使用 Gulp 处理 css 文件时如何修复图像 url？

Question

这是我设置的 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 以解决此问题？

Answer 1

您可以使用诸如 gulp-replace (https://www.npmjs.com/package/gulp-replace) 之类的插件来替换任何给定文件中的任意字符串，它应该可以解决您的问题；)