如何使用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？

回答

相關問題