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格式讲述此案例的
oldkeynewkey
取消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起来没那么慢,比起一个个改好多啦。

写在最后

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/888615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WordPress阅读文章显示太慢的处理

有两种方式, 1. 完全静态化。 尝试了几个插件,都未成功。算了放弃了。因为感觉到实际使用也不方便。 2. cache缓存 用了WP Super Cache测试了一下,打开过一次后,文章秒开,也算达到了要求。

Nginx 缓存 DNS 解析问题

网上看到一些文章,觉得很不错,这里记录一下。 一、缓存问题的解决方案 1 每次更改 DNS 解析都重载 Nginx 重载 Nginx 一定会刷新缓存。 2 使用 Nginx 的 resolver 我们在使用 Nginx 过程中,有时需要根据 Url 传值动态选择 host 进行代理转…

UML箭线图的理解和实践

在软件开发的世界里,UML(统一建模语言)作为一种标准化的建模语言,扮演着举足轻重的角色。UML类图更是软件开发设计和架构过程中的核心工具,它不仅能帮助开发者明确系统中的类及其关系,还能为后续的代码实现…

hive 行转列

行转列的常规做法是,group bysum(if())【或count(if())】 建表: CREATE TABLE table2 (year INT,month INT,amount DOUBLE );INSERT INTO table2 (year, month, amount) VALUES(1991, 2, 1.2),(1991, 3, 1.3),(1991, 4, 1.4),(1992, 1, 2.1),(1992, 2, 2.2),(1992…

Poetry 使用

Poetry poetry 是一个包管理和打包的工具。 poetry 将所有的配置都放置在一个 pyproject.toml 文件中,这些配置包括:依赖管理、构建、打包、发布。 Windows 环境 下载 python 3.12.7 ,默认安装 C:\Users\fernando\AppData\Roaming\Python\Python312 …

WPF+MVVM案例实战与特效(三十二)- 封装一个Appconfig 操作类(保留注释)

文章目录 1、概述2、ConfigHelper 的功能3、代码实现1、ConfigHelper.cs 代码2、帮助类使用4、总结1、概述 在开发 WPF 应用程序时,配置文件(如 App.config )是存储应用程序设置、连接字符串和其他运行时信息的常用方式。然而,直接操作这些配置文件可能会涉及到复杂的 XML…

【NoSQL数据库】Hbase基本操作——数据库表的增删改查

目录 一、Hbase原理 二、HBase数据库操作 三、遇到的问题和解决方法 一、Hbase原理 HBase的数据模型: 行键 时间戳 列族:contents 列族:anchor 列族:mime “com.cnn.www” T9 Achor:cnnsi.com”CNN” T8 Achor:…

【ETCD】ETCD用户密码认证

目录 概述 特殊用户和角色 root用户 root角色 用户操作 角色操作 启用身份验证 使用etcdctl进行身份验证 使用TLS通用名称 概述 etcd 2.1中增加了身份验证功能。etcd v3 API对身份验证功能的API和用户界面进行了轻微修改,以更好地适应新的数据模型。本指南…

解决RAG召回内容多、相似性高、区分度不够的问题

在做RAG应用时,经常会遇到召回内容多、相似性高、区分度不够的问题。特别是在一些规范建模标准化特别强的文档中,如数据中台建模是命名规范下,往往在相同的表名中,相差的一个字符就是完全不同的数据。如,1d、1m分别代码…

王道考研编程题总结

我还在完善中,边复习边完善(这个只是根据我自身总结的) 一、 线性表 1. 结构体 #define MaxSize 40 typedef struct{ElemType data[MaxSize];int length; }SqList 2. 编程题 1. 删除最小值 题意 :从顺序表中删除…

Vue3技术开发,使用纯CSS3动手制作一个3D环绕的相册展示效果,支持传入任意图片.3D轮播相册的组件

主要讲述封装一个3D轮播相册的组件&#xff0c;效果图如下&#xff0c;仅仅传入一个图片的数组即可&#xff0c;效果如下&#xff1a; 使用Vue3技术开发&#xff0c;支持传入任意张数的图片。 使用方法 <template><Swiper :list"list" /> </templat…

本地运行打包好的dist

首先输入打包命令 每个人设置不一样 一般人 是npm run build如果不知道可以去package.json里去看。 打包好文件如下 命令行输入 :npm i -g http-server 进入到dist目录下输入 命令cmd 输入 http-server 成功

通过华为鲲鹏认证的软件产品如何助力信创产业

软件通过华为鲲鹏认证与信创产业有着密切的联系。鲲鹏认证是华为推动信创产业发展的一项重要举措&#xff0c;通过该认证&#xff0c;软件可以在华为的生态系统中实现更好的兼容性和性能优化&#xff0c;从而推动信创产业的全面发展和国产化替代。 鲲鹏认证的定义和重要性 鲲…

RabbitMQ介绍及安装

文章目录 一. MQ二. RabbitMQ三. RabbitMQ作用四. MQ产品对比五. 安装RabbitMQ1. 安装erlang2. 安装rabbitMQ3. 安装RabbitMQ管理界⾯4. 启动服务5. 访问界面6. 添加管理员用户7. 重新登录 一. MQ MQ( Message queue ), 从字⾯意思上看, 本质是个队列, FIFO 先⼊先出&#xff…

Vue生成类似于打卡页面

数据表格 <el-table :data"tableData" border height"calc(100vh - 240px)" :cell-style"cellFun"><el-table-column label"姓名" show-overflow-tooltip prop"name" align"center"/><el-table-co…

vscode上传本地文件到服务器

vscode上传本地文件到服务器 首先下载插件SFTP&#xff0c;我们通过ftp进行文件传输 VScode打开要传输的文件 使用快捷键 ctrlshiftP 打开搜索窗口&#xff0c;搜索SFTP 点击之后vscode文件夹下会生成对应json文件 我们编辑json信息根据远程的服务器情况填写&#xff0c;比如…

趣味数学 2.3.7 | 完全免费,无注册登录,简约纯净

趣味数学是一款完全免费的数学学习软件&#xff0c;支持安卓系统。它无需登录注册&#xff0c;界面简约纯净&#xff0c;分类详细&#xff0c;涵盖趣味数学、数学初练、应用计算、数字推理、图形推理、数字2048、题目练习和数学知识等多个分类。每个分类包含丰富的题目和关卡&a…

JavaScript 快速上手

目录 一. JavaScript 基本概念 二. JavaScript 基本语法 1. 三种引入方式 (1) 行内样式 (2) 内部样式 (3) 外部样式 2. 基础语法 (1) 变量 (2) 数据类型 (3) 运算符 3. JS 对象 (1) 数组 <1> 创建数组 <2> 数组操作 (2) 函数 <1> 普通函数 &…

php基础:文件处理2

1.文件属性 当我们在程序中操作文件时&#xff0c;可能会使用到文件的一些常见属性&#xff0c;比如文件的大小、类型、修改时间、访问时间以及权限等等。PHP 中提供了非常全面的用来获取这些属性的内置函数&#xff0c;如下表所示。 2.目录操作 新建目录&#xff1a;mkdir(路…

架构设计读后——微服务

1 微服务历史 2005年&#xff1a;Dr. Peter Rodgers提出"Micro-Web-Services"概念2011年&#xff1a;一个软件架构工作组使用"microservice"来描述一中架构模式2012年&#xff1b;这个工作组正式使用"microservice"来代表这个架构2012年&#x…