如何使用gulp来使用config对象替换特定源文件中的字符串？

Question

如何在源文件连接时实现替换特定源文件上的字符串。

var gulp    = require('gulp'),
rename  = require('gulp-rename'),
concat  = require('gulp-concat'),
uglify  = require('gulp-uglify'),
replace = require('gulp-replace');
var config = {
    cssConcatFiles: [
       'one.css',
       'two.css',
       'three.css'
    ]   
 };

 gulp.task('css-concat', function() {
     return gulp.src(config.cssConcatFiles)
         .pipe(replace('url\(\'', 'url\(\'../images/fancybox/'))
         // I want to perform this replace to a particular file which is "two.css"

         .pipe(concat('temp.css'))
         .pipe(uglyfycss())
         .pipe(rename('temp.min.css'))
         .on('error', errorLog)
         .pipe(gulp.dest('public/css/plugins/fancybox'));
 });

Answer 1

这应该能行。吞咽

const gulpIF = require('gulp-if');


gulp.task('css-concat', function() {
 return gulp.src(config.cssConcatFiles)

     //.pipe(replace('url\(\'', 'url\(\'../images/fancybox/'))
     // I want to perform this replace to a particular file which is "two.css"

     .pipe(gulpIF((file) => file.path.match('two.css') , replace('url\(\'', 'url\(\'../images/fancybox/')))

     .pipe(concat('temp.css'))
     .pipe(uglyfycss())
     .pipe(rename('temp.min.css'))
     .on('error', errorLog)
     .pipe(gulp.dest('public/css/plugins/fancybox'));
});

您可以使用下面的管道，而不是一饮而尽的调用：

.pipe(replace(/url\(\'/g, function(match) {
      if (this.file.relative === "two.css") {
        return 'url\(\'../images/fancybox/';
      }
      else return match;
}))

因为gulp-replace将一个函数作为参数，并为该函数提供一个乙烯基文件引用(this.file)，您可以使用它来测试哪个文件正在通过流。但是，即使您不想做任何事情，也必须从函数调用中返回一些内容--所以返回原始匹配。

我建议您使用gulp-if，在您的情况下要干净得多。