使用gulp任務來更改在css文件中的URL

您好我正在寫一個gulp任務來更改我的fonts.css文件中的原始網址。構建分形（styleguide）後，網址需要更改爲指向另一條路徑。使用gulp任務來更改在css文件中的URL

該文件中的當前的URL看起來像這樣url('/assets/fonts/font.ttf');

我想我一口任務看文件fonts.css

並取代所有的URL看起來像url(./font.ttf);

這裏是任務

var config = require('../config'); 
if (!config.tasks.js) return; 

var gulp = require('gulp'); 
var replace = require('gulp-replace'); 

var fontURL = function() { 
    return gulp.src('../site/fractal/components/preview/fonts.css') 
    .pipe(replace('url("/assets/fonts/', 'url("./')) 
} 

gulp.task('font:url', ['fractal'], fontURL); 
module.exports = fontURL

我把這個任務和幾個其他人一起納入分形：bu ild任務，以便當有人運行該命令啓動styleguide時，這將被動態地處理，而不是必須更改許多路徑/ url。但是這個任務不起作用。有另一種方法可以完成我想要的嗎？

的fonts.css文件的SNIPPIT和所有的CSS的URL我想改變的例子（還有更多）

@font-face { 
    font-family: 'Overpass'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-bold-webfont.eot'); 
    src: local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-regular-webfont.woff2') format('woff2'), 
     local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-regular-webfont.woff') format('woff'), 
     local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-regular-webfont.ttf') format('truetype'), 
     local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-regular-webfont.svg#overpass') format('svg'); 
}

來源

2017-07-06 gwar9

快速的問題：你保存修改後的文件在某些時候？你的fontURL（）沒有gulp.dest。

另外，我想簡化此

.pipe(replace('url("/assets/fonts/', 'url("./'))

修改成：

.pipe(replace('/assets/fonts/', './'))

來源

2017-07-06 20:11:23 Mark

的過程是這樣的分形構建 1沒有用於產生所有這些文件到一個任務的生產準備好的目錄 2我有一個任務來複制分形需要的所有文件以構建styleguide，並將它們移動到分形目錄中 3用於分形目錄中的fonts.css是我想要運行此任務的位置。。。我應該輸入相同的文件夾嗎？我會用字體CSS文件和所有我想要修改的url的示例更新問題 – gwar9

使用gulp任務來更改在css文件中的URL

回答

相關問題