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

大家好，我必须用gulp替换css文件中的所有URL。例如，url（picture.webp）到$CMS\u REF（媒体：“picture”）$。这应该适用于具有特定路径的所有URL。我怎样才能做到这一点？

您可以使用可以使用正则表达式、字符串甚至函数的模块

我的正则表达式不是很好，所以请原谅我的错误

示例：

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

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

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

1.Regex:

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

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

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

2.字符串：

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

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

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

3.功能：

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

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

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之间的内容，并替换相应的内容。我想你可以使用正则表达式替换。类似这样的东西：

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\u REF“picture”中已写入。字符串必须来自特定的url。