How can I use gulp to replace a string in a particular source file using a config object?

Question

How to achieve a replacing a string on a particular source file while the source files will be concatenated.

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

This should work. gulp-if

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

You could use the following pipe instead of the gulp-if call:

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

since gulp-replace will take a function as an argument and provide that function with a vinyl file reference (this.file) which you can use to test for which file is passing through the stream. You must, however, return something from the function call even when you want to do nothing - so return the original match.

I recommend using gulp-if, much cleaner in your case.