使用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

回答

相关问题