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

Posted 2023-02-18

【中文标题】使用 gulp 任务更改 css 文件中的 url

【英文标题】：Use gulp task to change urls in css file

【发布时间】：2017-12-10 13:35:52

【问题描述】：

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

文件中的当前网址如下所示url('/assets/fonts/font.ttf');

我希望我的 gulp 任务查看文件 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

我将此任务与其他几个任务一起合并到 fractal:build 任务中，这样当有人运行该命令来启动样式指南时，这会得到动态处理，而不必更改许多路径/url。但是，此任务不起作用。还有另一种方法来完成我想要的吗？

fonts.css 文件的片段和我想要更改的所有 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');

【参考方案1】：

快速提问：您是否会在某个时候保存修改后的文件？你的 fontURL() 没有 gulp.dest。

另外，我会简化这个

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

将其更改为：

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

【讨论】：

分形构建中的过程如下所示 1 有一个任务是将所有这些文件生成到其生产就绪目录中 2 我有一个任务来复制分形构建样式指南所需的所有文件，我将它们移动到分形目录 3 中，分形目录中的 fonts.css 是我要运行此任务的位置。 . .我应该进入同一个文件夹吗？我将使用字体 css 文件示例和我尝试修改的所有 url 来更新问题