使用Gulp处理css文件时如何修复图片网址？

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 urls？

Answer 1

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