如何在Gulp中实现文件文本查找替换 修正style.min.css精灵图路径

现有代码问题 #

• from参数传入字符串仅会替换第一个匹配项，无法实现全局替换
• replace.sync()方法本身已经完成了文件读写替换操作，后续的src + pipe逻辑属于冗余无效代码
• 导出Gulp任务时错误执行了fixSprites()，传入的是函数执行结果而非函数引用，Gulp无法正常调度任务

方案1：基于现有replace-in-file插件修正 #

const build = 'build/'
const replace = require('replace-in-file')
const config = {
    build: {
        style: build + 'css'
    }
}

function fixSprites(cb) {
    try {
        const results = replace.sync({
            files: `${config.build.style}/style.min.css`,
            // 正则加g标志实现全局匹配替换
            from: /img\/sprite\.png/g,
            to: '../img/sprite.png',
            countMatches: true,
        })
        console.log(`替换完成：匹配到${results[0].numMatches}处，成功替换${results[0].numReplacements}处`)
        cb()
    } catch (err) {
        console.error('替换操作失败：', err)
        cb(err)
    }
}

// 导出任务时传入函数引用，不要加括号执行
exports.fixSprites = fixSprites

方案2：不使用replace-in-file插件（Gulp生态实现） #

需先安装依赖：
npm install gulp-replace --save-dev
实现代码：

const { src, dest } = require('gulp')
const replace = require('gulp-replace')
const build = 'build/'
const config = {
    build: {
        style: build + 'css'
    }
}

function fixSprites() {
    return src(`${config.build.style}/style.min.css`)
        .pipe(replace(/img\/sprite\.png/g, '../img/sprite.png'))
        // 替换完成后写回原目录
        .pipe(dest(config.build.style))
}

exports.fixSprites = fixSprites

方案3：纯Node.js实现（无任何插件依赖） #

const fs = require('fs')
const path = require('path')
const build = 'build/'
const config = {
    build: {
        style: build + 'css'
    }
}
const cssFilePath = path.resolve(config.build.style, 'style.min.css')

function fixSprites(cb) {
    // 读取文件内容
    fs.readFile(cssFilePath, 'utf8', (readErr, content) => {
        if (readErr) return cb(readErr)
        // 全局替换匹配内容
        const updatedContent = content.replace(/img\/sprite\.png/g, '../img/sprite.png')
        // 写回文件
        fs.writeFile(cssFilePath, updatedContent, 'utf8', cb)
    })
}

exports.fixSprites = fixSprites

内容的提问来源于stack exchange，提问作者Brend8c