如何用 gulp 替换 css 文件中的 url？答案

【问题标题】：How to replace the url within an css file with gulp?如何用 gulp 替换 css 文件中的 url？
【发布时间】：2020-05-15 09:17:38
【问题描述】：

大家好，我必须用 gulp 替换 css 文件中的所有 url。例如 url(picture.webp) 到 $CMS_REF(media:"picture")$。这应该适用于具有特定路径的所有 url。我该怎么做？

【问题讨论】：

标签： javascript css regex gulp

【解决方案1】：

您可以使用模块gulp-string-replace，它可以使用正则表达式、字符串甚至函数。

我的正则表达式不是很好，请原谅任何错误。

示例：

1.正则表达式：

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

gulp.task('replace', function() {
  gulp.src(["./css/index.css"]) //Specify allowed files  
    .pipe(replace(new RegExp('@url@', 'g'), '$CMS_REF(media:"picture")$'))
    .pipe(gulp.dest('./build/css/index.css'))
});

2.字符串：

var replace = require('gulp-string-replace');
gulp.task('replace', function() {
  gulp.src(["./css/index.css"]) //Specify allowed files 
     .pipe(replace('url(picture.webp)', '$CMS_REF(media:"picture")$'))
     .pipe(gulp.dest('./build/css/index.css'))
});

3.功能：

var replace = require('gulp-string-replace');
gulp.task('replace', function() {
  gulp.src(["./css/index.css"]) //Specify allowed files 
    .pipe(replace('url(picture.webp)', function () {
       return '$CMS_REF(media:"picture")$';
    }))
    .pipe(gulp.dest('./build/css/index.css'))
});

【讨论】：

谢谢。但它必须是全球性的。我必须在我的 css 文件中的每个 url 之间获取内容并替换它对应的内容。
我猜你可以使用 RegEx Replace 来实现。像这样的东西：gulp.task('replace', function() { gulp.src(["./css/index.css"]) .pipe(replace(url({1}),'$CMS_REF(media:"picture")$')) .pipe(gulp.dest('./build/css/index.css')) });
对不起，但这也对我没有帮助，因为你在你的 $CMS_REF “图片”中写了。字符串必须来自特定的 url。