使用 Gulp 替换 XML 文件内容

使用 Gulp 替换 XML 文件内容

Gulp 提供了多种方式来替换 XML 文件中的内容，以下是几种常用的方法：

方法1：使用 gulp-replace 进行简单替换（正则表达式）

安装插件

npm install gulp-replace --save-dev

示例代码

const gulp = require('gulp');
const replace = require('gulp-replace');

function replaceXml() {
  return gulp.src('src/*.xml')
    // 替换属性值
    .pipe(replace(/<version number="([^"]*)"/g, '<version number="2.0.0"'))
    // 替换节点内容
    .pipe(replace(/<title>([^<]*)<\/title>/g, '<title>New Title</title>'))
    .pipe(gulp.dest('dist'));
}

exports.default = replaceXml;

方法2：使用 gulp-xml-editor 进行精确修改

安装插件

npm install gulp-xml-editor --save-dev

示例代码

const gulp = require('gulp');
const xmlEditor = require('gulp-xml-editor');

function editXml() {
  return gulp.src('src/*.xml')
    .pipe(xmlEditor([
      // 修改属性
      { path: '//book/@id', value: 'new-id' },
      // 修改节点值
      { path: '//title', text: 'New Book Title' },
      // 添加新节点
      { path: '//books', append: '<book id="new-book"><title>Added Book</title></book>' }
    ]))
    .pipe(gulp.dest('dist'));
}

exports.default = editXml;

方法3：使用 gulp-modify-xml 进行复杂操作

安装插件

npm install gulp-modify-xml --save-dev

示例代码

const gulp = require('gulp');
const modifyXml = require('gulp-modify-xml');

function modifyXmlContent() {
  return gulp.src('src/*.xml')
    .pipe(modifyXml(function(doc) {
      // 修改属性
      doc.root.books.book[0].$.id = 'updated-id';
      
      // 修改文本内容
      doc.root.books.book[0].title = 'Updated Title';
      
      // 添加新元素
      doc.root.books.book.push({
        $: { id: 'new-book' },
        title: 'New Book'
      });
      
      return doc;
    }))
    .pipe(gulp.dest('dist'));
}

exports.default = modifyXmlContent;

方法4：使用 cheerio 进行 jQuery 风格操作

安装插件

npm install gulp-cheerio --save-dev

示例代码

const gulp = require('gulp');
const cheerio = require('gulp-cheerio');

function processXml() {
  return gulp.src('src/*.xml')
    .pipe(cheerio({
      run: function($, file) {
        // 修改属性
        $('book').attr('id', 'new-id');
        
        // 修改文本
        $('title').text('New Title');
        
        // 添加新元素
        $('books').append('<book id="book3"><title>Book 3</title></book>');
      },
      parserOptions: {
        xmlMode: true
      }
    }))
    .pipe(gulp.dest('dist'));
}

exports.default = processXml;

方法5：自定义转换流处理大文件

const gulp = require('gulp');
const through = require('through2');
const { parseString, Builder } = require('xml2js');

function transformXml() {
  return gulp.src('src/*.xml')
    .pipe(through.obj(function(file, enc, cb) {
      if (file.isNull()) {
        return cb(null, file);
      }
      
      parseString(file.contents.toString(), (err, result) => {
        if (err) return cb(err);
        
        // 修改XML结构
        result.root.item[0].$.id = 'new-id';
        result.root.item[0].name = 'New Name';
        
        const builder = new Builder();
        file.contents = Buffer.from(builder.buildObject(result));
        cb(null, file);
      });
    }))
    .pipe(gulp.dest('dist'));
}

exports.default = transformXml;

最佳实践建议

1. 简单文本替换：使用 gulp-replace
2. 精确XML操作：使用 gulp-xml-editor 或 gulp-modify-xml
3. 熟悉jQuery风格：使用 gulp-cheerio
4. 大文件处理：使用流式处理（方法5）
5. 复杂转换：考虑使用自定义转换流

完整工作流示例

const gulp = require('gulp');
const replace = require('gulp-replace');
const xmlEditor = require('gulp-xml-editor');
const cheerio = require('gulp-cheerio');

// 简单替换
function replaceSimple() {
  return gulp.src('src/*.xml')
    .pipe(replace(/old-value/g, 'new-value'))
    .pipe(gulp.dest('temp'));
}

// 精确XML修改
function editXml() {
  return gulp.src('temp/*.xml')
    .pipe(xmlEditor([
      { path: '//item/@id', value: 'updated' }
    ]))
    .pipe(gulp.dest('dist'));
}

// jQuery风格操作
function cheerioProcess() {
  return gulp.src('dist/*.xml')
    .pipe(cheerio({
      run: function($) {
        $('items').attr('version', '2.0');
      },
      parserOptions: { xmlMode: true }
    }))
    .pipe(gulp.dest('final'));
}

exports.default = gulp.series(replaceSimple, editXml, cheerioProcess);

选择哪种方法取决于您的具体需求、XML文件复杂度以及您对相关技术的熟悉程度。