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

背景

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

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

目的

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

难点

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

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

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

分析

1. 代码中特定的关键字；
2. 已有一份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起来没那么慢，比起一个个改好多啦。

写在最后

显然大家可以看到，实现起来没有想象中那么麻烦，不过呢，要想到这种解决方案，首先我们自己需要充实我们的项目经历和经验，多去发现不同的解决方案。

这样，当遇到棘手的问题，总有一种方案是契合现在的问题的。
好啦，废话就说这么多，如果有帮助到大家，记得给博主点个小赞赞，抱拳感谢！！！