Question

您好我正在编写gulp任务来更改fonts.css文件中的原始网址。一旦构建了分形（styleguide），网址就需要更改为指向另一条路径。

文件中的当前网址看起来像url('/assets/fonts/font.ttf');

我希望我的gulp任务查看文件fonts.css

并将所有网址替换为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

我正在将这个任务与其他几个人一起纳入分形：构建任务，这样当有人运行该命令来启动样式指南时，这将动态处理，而不是必须更改许多路径/ URL。但是这个任务不起作用。还有另一种方法可以实现我想要的吗？

fonts.css文件的snippit以及我想要更改的所有css网址的示例（还有更多）

@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');
}

Answer 1

快速提问：你是否在某些时候保存了修改过的文件？你的fontURL（）没有gulp.dest。

另外，我会简化这个

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

将其更改为：

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

使用gulp任务更改css文件中的URL

1 个答案: