How to replace strings with values in an array using gulp replace

Question

I have an XML file where I need to replace attribute values with the values from an array using GulpJS.

JavaScript code:

var gulp = require('gulp'); 
var replace = require('gulp-replace'); 
gulp.task('default', function() {   
    //array is dynamic
    var users = ["existing_value1", "existing_value2", "existing_value3"];  
    var num = users.length();
    for (i=0;i<num;i++) {
        gulp.src(['idmap/*.xml'])
            .pipe(replace(users[i], 'SYSTEM'))
            .pipe(gulp.dest('build/'));
    } 
});

Sample XML:

<?xml version="1.0"?><IDMAP><RECORD>
<TOKEN data = "414"/><NAME data="existing_value1"/></RECORD>
<RECORD><TOKEN data = "420"/><NAME data="existing_value2"/></RECORD>   
<RECORD><TOKEN data = "361"/><NAME data="existing_value3"/></RECORD> 
</IDMAP>

With this code, I'm able to replace the string in XML with the last item in array. How to replace all the items with the ones in array and then do the build?

Thanks in advance!

Answer 1

Each time your for loop run it overwrite the dest file. That's why you have replaced only the last item in your array.

gulp-replace only support String or RegExp as a search parameter. Therefore I would suggest that you write your own plugin. It would be something like this:

var gulp = require('gulp');
var rs = require('replacestream');
var through = require('through2');

gulp.task('default', function() {   
  var users = ["existing_value1", "existing_value2", "existing_value3"];
  gulp.src(['idmap/*.xml'])
    .pipe(replaceArray(users, 'SYSTEM'))
    .pipe(gulp.dest('build/'))
});

/**
 * This is your plugin inspired in gulp-replace
 *
 * @method replaceArray
 * @param  {Array} searchArray
 * @param  {String} replacement
 */
function replaceArray(searchArray, replacement) {
  return through.obj(function(file, encoding, callback) {
    if (file.isStream()) {
      file.contents = searchArray.reduce(function (contents, search) {
        return contents.pipe(rs(search, replacement));
      }, file.contents);
      return callback(null, file);
    }
    if (file.isBuffer()) {
      var result = searchArray.reduce(function (contents, array) {
        return contents
          .split(search)
          .join(replacement);
      }, String(file.contents));
      file.contents = new Buffer(result);
      return callback(null, file);
    }
    callback(null, file);
  });
}

Answer 2

You can do this using regex. If you can it would be better if you could write a pattern that would match all the attributes you want. For example, this would work on your example:

gulp.task('default', function() {
    gulp.src(['idmap/*.xml'])
        .pipe(replace(/existing_value\d+/g, 'SYSTEM'))
        .pipe(gulp.dest('build/'));
});

But if your attributes are more complicated than that you can generate a dynamic expression from your users array:

gulp.task('default', function() {

    var users = ['existing_value1', 'existing_value2', 'existing_value3'];
    var regex = new RegExp('\\b' + users.join('\\b|\\b') + '\\b', 'g');

    gulp.src(['idmap/*.xml'])
        .pipe(replace(regex, 'SYSTEM'))
        .pipe(gulp.dest('build/'));

});