jlmmx

1.0.6 • Public • Published

久零平台官网与监控平台的替换脚本

0. 特别说明: 此脚本仅在 win10 / win11 上测试通过, mac/linux未进行测试, 不保证没有问题.

1. 使用方法

  • 安装
// 全局安装
npm i jlmmx -g
  • 执行脚本
// 在当前目录生成一个配置文件(config.js), 你需要自行填入对应的参数
mmx -init
// 执行脚本
mmx -wm

2. 脚本参数说明

命令 说明 参数
-V 输出对应的版本
-h(--help) 查看帮助
-c(--config) 输出配置文件所需要的属性参数
-init(--init) 在当前目录下生成一个配置文件
-w(--web) 执行官网项目的脚本任务 ask
-m(--mor) 执行监控平台的脚本任务 ask
-wm(--wm) 同时执行官网项目与监控平台项目的脚本任务 ask

其他说明

  • 命令里面前面是简写, 后面是全写, 两种方式都可以.
  • 最后的那个参数意思是你可以在命令后面加上该参数.
  • ask参数 是用来控制对应的流程的, 这个会在下面进行说明.
  • 比如
mmx -w ask
mmx -m ask
mmx -wm ask

3. 配置文件config.js说明

  • 这个脚本会读取当前目录下的 config.js 文件, 然后使用里面的配置项. 所以这个文件是必须存在的.

两种创建方式

一: 命令行创建 (推荐)

mmx -init

二: 自行创建

自行创建时你需要在当前目录下手动新建 config.js 文件, 并使用 module.exports  导出一个对象.  如下:
___________________________________
module.exports = {
	  zipPath: '',
	  webPath: '',
	  monitorPath: '',
	  name: '',
	  morName: '',
}

配置文件参数说明

参数名 作用 其他说明
zipPath 压缩包的解压后绝对路径 (请注意, 路径以 '/' 或者 '\\' 符号分割, 请不要直接 '\')
webPath 官网项目的绝对路径 (请注意, 路径以 '/' 或者 '\\' 符号分割, 请不要直接 '\')
monitorPath 监控平台项目的绝对路径 (请注意, 路径以 '/' 或者 '\\' 符号分割, 请不要直接 '\')
name 名称 官网会以这个创建分支, 监控平台会将style文件复制到这个文件夹里面, git提交信息也是这个(这个属性是可选的, 如果不进行配置, 则将以 morName 的配置自动生成拼音作为这个配置的值)
morName 名称 监控平台左上角需要修改这个客户的名称, 一般是中文

4. 流程说明(即脚本会做的几个步骤)

官网项目

1. 拉取代码

2. 创建远程分支

3. 替换图片

4. 替换颜色

5. 推送代码

监控平台项目

1. 拉取代码

2. 切换至exp2.0分支

3. 替换图片

4. 替换颜色

1) 替换css变量
2) 替换theme.js中的变量
3) 替换setting.js中的中文名称

5. 复制文件夹

6. 推送代码

-----------------

  • 默认情况下, 脚本会按顺序执行上面的流程, 当其中的一个流程报错时, 整个脚本将终止.
  • 如果你想单独控制执行某个流程, 也是可以的. 就是用上面脚本参数里面说的 ask 参数, 允许你通过命令行交互的形式进行选择需要的流程. 但请注意, 你需要自行确保别的流程的正常运行.(比如你选择了监控平台的复制文件夹的这个流程, 那么你需要确保前面几个流程已经做好!), 使用方法请看第二点.

5. 注意事项说明

1. 压缩包文件目录需包含: '监控平台', '钱包', 'h5', 'pc', '主色.txt' 这几个目录 (一般从UI那边过来就是这个目录格式, 脚本在开始时也会进行检测, 这个后面会说)
2. 关于node版本, 在监控平台里面, 有一个复制文件夹的操作, 这个地方使用到了 fs.cp 这个api, 需要v16以上的版本才能支持. 所以, 运行这个脚本时你需要切换到v16以上的node版本才能继续运行.

6. 检测

为了保证脚本稳定性, 在运行之前会进行几个检测, 检测通过后才会正常执行流程, 检测不通过会给出对应的提示. 下面说一下会进行的检测项

1. 检测当前 config.js 文件是否存在
2. 检测 config.js 文件中是否定义了必要的参数(请看第三点配置参数说明)
3. 检测 config.js 的name属性是否冲突, 如果之前出现过, 将不能继续
4. 检测 git 命令是否可用.
5. 检测zipPath这个路径下的目录结构是否正确 (注意事项第一点)
6. 检测项目目录结构, 官网项目会检测是否包含 src / package.json / static / index.html. 监控平台会检测是否包含 src / package.json / theme / vue.config.js. 这个步骤只检测几个关键的文件. 确保不会配置错.

7. 颜色说明

  • 程序对颜色的替换是读取 '主色.txt' 这个文件里面的颜色的. 官网需要两个颜色, 监控平台需要三个颜色, 如果你看到txt文件里面只有两个颜色值, 那说明UI只给了官网的颜色, 监控平台的没有给.你需要自己加上去.
  • 三个颜色的来源: 打开监控平台h5的PSD文件后, 有一个侧滑的菜单栏, 那里有一个未选中的颜色(浅的), 一个选中的颜色(深的), 保存好这两个颜色, 再找到搜索页面, 有个搜索框的背景颜色. 就是这三个了.
  • 5个颜色需要按顺序 , 前两个官网的颜色UI已经写好就不用管了, 后面依次加上 菜单栏颜色(深), 菜单栏颜色(浅), 搜索框背景颜色 就可以了. (注意按顺序!按顺序!按顺序!)
  • 颜色仅支持 十六进制 hex 颜色值, 代码里面通过正则匹配的(匹配了# + 后六位数字英文的组合)
  • 格式大概这样: http://pandl.top/upload/show.png

Readme

Keywords

Package Sidebar

Install

npm i jlmmx

Weekly Downloads

0

Version

1.0.6

License

ISC

Unpacked Size

48 kB

Total Files

10

Last publish

Collaborators

  • mmx_gjp