本篇文章带大家继续angular的学习 , 介绍一下Angular 结合 Git Commit 版本处理的方法 , 希望对大家有所帮助!
文章插图
文章插图
上图是页面上展示的
测试环境/开发环境
版本信息 。 【相关教程推荐:《angular教程》】 后面有介绍
文章插图
上图表示的是每次提交的
Git Commit
的信息 , 当然 , 这里我是每次提交都记录 , 你可以在每次构建的时候记录 。 So , 我们接下来用
Angular
实现下效果 , React
和 Vue
同理 。 搭建环境因为这里的重点不是搭建环境 , 我们直接用
angular-cli
脚手架直接生成一个项目就可以了 。 Step 1: 安装脚手架工具
npm install -g @angular/cliStep 2: 创建一个项目
# ng new PROJECT_NAMEng new ng-commitStep 3: 运行项目
npm run start项目运行起来 , 默认监听
4200
端口 , 直接在浏览器打开http://localhost:4200/
就行了 。 4200 端口没被占用的前提下此时 ,
ng-commit
项目重点文件夹 src
的组成如下: src├── app // 应用主体│ ├── app-routing.module.ts // 路由模块│ .│ └── app.module.ts // 应用模块├── assets // 静态资源├── main.ts // 入口文件.└── style.less // 全局样式上面目录结构 , 我们后面会在
app
目录下增加 services
服务目录 , 和 assets
目录下的 version.json
文件 。 记录每次提交的信息在根目录创建一个文件
version.txt
, 用于存储提交的信息;在根目录创建一个文件commit.js
, 用于操作提交信息 。 重点在
commit.js
, 我们直接进入主题: const execSync = require('child_process').execSync;const fs = require('fs')const versionPath = 'version.txt'const buildPath = 'dist'const autoPush = true;const commit = execSync('git show -s --format=%H').toString().trim(); // 当前的版本号let versionStr = ''; // 版本字符串if(fs.existsSync(versionPath)) { versionStr = fs.readFileSync(versionPath).toString() + '\n';}if(versionStr.indexOf(commit) != -1) { console.warn('\x1B[33m%s\x1b[0m', 'warming: 当前的git版本数据已经存在了!\n')} else { let name = execSync('git show -s --format=%cn').toString().trim(); // 姓名 let email = execSync('git show -s --format=%ce').toString().trim(); // 邮箱 let date = new Date(execSync('git show -s --format=%cd').toString()); // 日期 let message = execSync('git show -s --format=%s').toString().trim(); // 说明 versionStr = `git:${commit}\n作者:${name}<${email}>\n日期:${date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}\n说明:${message}\n${new Array(80).join('*')}\n${versionStr}`; fs.writeFileSync(versionPath, versionStr); // 写入版本信息之后 , 自动将版本信息提交到当前分支的git上 if(autoPush) { // 这一步可以按照实际的需求来编写 execSync(`git add ${ versionPath }`); execSync(`git commit ${ versionPath } -m 自动提交版本信息`); execSync(`git push origin ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`) }}if(fs.existsSync(buildPath)) { fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))}上面的文件可以直接通过
node commit.js
进行 。 为了方便管理 , 我们在 package.json
上加上命令行: "scripts": { "commit": "node commit.js"}那样 , 使用
npm run commit
同等 node commit.js
的效果 。 生成版本信息有了上面的铺垫 , 我们可以通过
commit
的信息 , 生成指定格式的版本信息version.json
了 。 在根目录中新建文件
version.js
用来生成版本的数据 。 const execSync = require('child_process').execSync;const fs = require('fs')const targetFile = 'src/assets/version.json'; // 存储到的目标文件const commit = execSync('git show -s --format=%h').toString().trim(); //当前提交的版本号 , hash 值的前7位let date = new Date(execSync('git show -s --format=%cd').toString()); // 日期let message = execSync('git show -s --format=%s').toString().trim(); // 说明let versionObj = { "commit": commit, "date": date, "message": message};const data = https://www.52zixue.com/zhanzhang/webqd/js/03/28/68749/JSON.stringify(versionObj);fs.writeFile(targetFile, data, (err) => { if(err) { throw err } console.log('Stringify Json data is saved.')})
推荐阅读
- Win11怎么设置关机键?Win11快捷键关机的设置方法
- Win11提示打印机错误0x00000040指定的网络名不再可用怎么办?
- 抠图怎么抠更干净?一键抠图快速教搞定
- Win10开机自动断电重启怎么回事?
- Win10临时文件夹无写入权限,不能安装怎么办?
- 旧年代老照片怎么修复?一键完成老照片人脸修复的方法
- Win10定时关机命令不起作用怎么办?
- 孩子便便干结,又挑食怎么办
- 孩子不愿意咀嚼怎么办
- 孩子只爱吃粥怎么办