如何使用 gulp replace 用数组中的值替换字符串

Question

我有一个 XML 文件，我需要将属性值替换为使用 GulpJS 的数组中的值。

JavaScript 代码：

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

示例 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>

使用此代码，我可以将 XML 中的字符串替换为数组中的最后一项。如何将所有项目替换为数组中的项目然后进行构建？

提前致谢！

Answer 1

每次运行 for 循环时，它都会覆盖 dest 文件。这就是为什么您只替换了 array 中的最后一项。

gulp-replace 仅支持将String 或RegExp 作为搜索 参数。因此，我建议您编写自己的插件。应该是这样的：

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

您可以使用正则表达式来做到这一点。如果可以的话，如果您可以编写一个匹配您想要的所有属性的模式会更好。例如，这将适用于您的示例：

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

但如果您的属性比这更复杂，您可以从 users 数组生成动态表达式：

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

});