gulp应该怎么用，前端批量自动化替换文件

news2025/1/19 20:43:09

背景

最近公司准备把所有项目中用到的国际化相关的key规范化，原因是:

一直以来公司的app和web端 在针对相同的需求以及相同的国际化语言，需要设置不同的两份国际化文件，难以维护
旧版的国际化文件中，存在的大量值重复，但是key不相同的地方，如：以“取消”值为例
- ‘取消’ — ‘cancel’ ---- ‘xxx_cancel’
- 三个key，都是用来表示 “取消”
更新一次国际化语言的方式，奇葩至极，每次都需要同步最近一次的国际化，然后整合；
之前的国际化key，不规范，五花八门的写法，中文、数字、英文都有，这次也需要一并优化。

目的

app和web端针对相同的设计，使用同一份国际化配置；
优化国际化的更新

难点

公司目前除了app端外，web端的服务一共有7个项目设计到了需要更改国际化，所以

需要把每个项目中旧的国际化key替换为新版本国际化的key

怎么样快速并且不漏掉旧key的替换呢？

分析

代码中特定的关键字；
已有一份xlsx文档，上面记录了新旧key的记录；

这个时候，脑海中已经浮现出来自动化的批量处理，好在之前有过类似的经历，使用gulp处理过主题相关的自动化任务，不是重点就不提了。

所以这里也打算使用gulp来实现自动化任务，来实现一个名叫search-replace的任务：完成在前端项目中批量并且精准匹配一定特性的关键词，然后替换成想要的值

需要注意

自动化工具始终是辅助的，最终还是我们要手动确认一下每个文件中替换的位置

为什么呢

不同人在处理国际化上，有自己独特的使用方式

导致项目中国际化的写法五花八门，我们没办法精准匹配

gulp

本次的主角，官网
在这里插入图片描述

具体实现

项目中安装需要的依赖，由于该自动化任务，只用于开发中的依赖，安装记得使用 --save-dev || -D

npm i -D gulp gulp-replace xlsx

准备好需要处理的xlsx文件，本次博主按照如下的xlsx格式讲述此案例的

oldkey	newkey
取消	key_main_cancel
确定	key_main_confirm

在根目录中创建 gulpfile.js文件

const gulp = require("gulp");
const replace = require("gulp-replace");
const filelist = require("gulp-filelist");
const XLSX = require("xlsx");

/**
 * 获取关键词映射
 */
const getKeywordMap = () => {
  const workbook = XLSX.readFile("./key.xlsx");
  const sheetName = workbook.SheetNames[0];
  const sheet = workbook.Sheets[sheetName];
  const jsonData = XLSX.utils.sheet_to_json(sheet);
  const oldKey = "oldkey";
  const newKey = "newkey";
  let result = {};
  jsonData.forEach(item => {
    if (!item[oldKey] || !item[newKey]) {
      return;
    }
    result[item[oldKey]] = item[newKey]
  });
  return result;
};

/**
 * 全局检索，替换关键词
 */
gulp.task("search-replace", () => {
  const keyMap = getKeywordMap();

  // 检索 可能出现国际化key的文件类型，这里博主的只有js jsx 大家酌情
  return gulp
    .src(["./src/**/*.js", "./src/**/*.jsx"])
    .pipe(
      // 正则匹配，前后加上单或者双引号，防止误匹配
      // 这里最好是加上引号，将错误识辨降低到最低
      replace(
        new RegExp(`(["'])(${Object.keys(keyMap).join("|")})\\1`, "g"),
        function (match) {
          // match 去掉单双引号
          match = match.replace(/^['"]|['"]$/g, "");
          return `"${keyMap[match]}"`;
        }
      )
    )
    .pipe(gulp.dest("./src")) // 将替换后的文件输出到原始文件夹
    .on("end", function () {
      // 完成
    });
});


gulp.task("replace-key", gulp.series("search-replace"));

执行命令 gulp replace-key，请放到package.json的scripts中，毕竟我们没有全局安装gulp。
检查每个被替换的文件，搂一眼没什么问题就可以了

博主执行完自动化脚本，一共更改了191个文件，随便打开一个文件，我们可以通过编辑器的git插件可以看到

其实更改的地方不是很多，我们check起来没那么慢，比起一个个改好多啦。