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

这是我设立的一个Gulp任务。它连接，缩小和重命名一堆css文件。如何使用Gulp处理css文件时修复图像URL？

gulp.task（ '处理-CSS'，函数（）{

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网址（在css/存在），所以当我处理这些文件，然后输出它们在子目录（css/dist/）的网址被破坏和图像不显示在网站上（404返回）。

如何让Gulp重写输出文件中的img url来解决这个问题？

来源

2015-06-21 luqo33

我不知道答案，但一个我想尝试的是使用Sass或Less处理器作为连接器/缩小器 - 我认为他们两个都接受vanilla CSS作为有效输入，并且可能会将此作为选项。 –

您可以使用插件，例如一饮而尽替换（https://www.npmjs.com/package/gulp-replace）在任何给定的文件替换任意字符串，它应该做你的情况的伎俩;）

来源

2015-06-21 11:43:05

有很多更好的选择。请参阅https://www.npmjs.com/package/gulp-css-url-adjuster或https://www.npmjs.com/package/gulp-css-rebase-urls。这两个设计都是为了解决吞噬处理后css中的相对url问题。 – Mark

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

回答

相关问题