# 標準化Commit & CHANGELOG 自動化流程
## 概要
由於每次建完新版本後，若是每次都需手動打上完整的CHANGELOG，真的很麻煩。故此處紀錄一下如何進行標準化的commit，並能由Script生成自動的CHANGELOG。
## 事前準備
首先須確認專案有採用Gitflow，到時需照著Develop -> Release 的方式進行建立。
目前採用的自動化方法，是基於Angular所規範的commit格式所生成，故需要先建立一個node js的環境，透過package.json紀錄。
- 執行：
```C=
npm init
```
- 設定好專案內容後，會看到基本的package.json被建立出來。
## 規範化Commit
### Step1. 安裝[commitizen](https://github.com/commitizen/cz-cli)
- commitizen是用於格式化commit的工具，可以根據訂定好的格式化內容進行規範。並為我們提供一些cli命令比如：commitizen init、git cz。
- 建議進行global的安裝，便可用於所有專案。(只需一次)
```C=
npm install -g commitizen
```
### Step2. 安裝[cz-conventional-changelog](https://github.com/commitizen/cz-conventional-changelog)
- 上述提到commitizen可以根據訂定好的格式作為規範，而cz-conventional-changelog則是標準的Angular規範
- 可以透過底下指令自動安裝。
```C=
commitizen init cz-conventional-changelog --save-dev --save-exact
```
- 他所規定的格式如下：
> 一個commit message由header、body、footer所組成。header則包括type，scope，subject
```C
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```
- [詳細規定可見此](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)
- [或是中文的介紹](https://wadehuanglearning.blogspot.com/2019/05/commit-commit-commit-why-what-commit.html)
一些commit的範例：
```C
docs(changelog): update changelog to beta.5
```
```C
docs(changelog): update changelog to beta.5
fix(release): need to depend on the latest rxjs and zone.js
The version in our package.json gets copied to the one we publish, and users need the latest of these.
```
### Step3. 安裝[commitlint](https://github.com/conventional-changelog/commitlint)
- 這是用於在commit被送出前，進行檢查的步驟，畢竟我們也很難確保每次所打的內容都有符合規則...
- 建議單一專案安裝。
```C
npm install --save-dev @commitlint/config-conventional @commitlint/cli
```
- 並且在package.json後半段加上
```
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
}
```
### Step4. 安裝[Husky](https://github.com/typicode/husky)
- 雖然安裝第三步驟後可以完成檢查，但仍需要用Husky設定檢查的時機點。
- 安裝前，記得先確保Git已安裝，並有設定環境變數
- 可以用`Git --version`測試
- 第一步也是先執行：
```C
npm install husky@4.3.0 --save-dev
```
- 並在package.json加入：
```
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
```
> 完成以上後，不管是用git commit或git cz，甚至是在sourcetree直接按下commit，都會進行commit的檢查。[color=lightGreen]
若commit有誤，例如這邊輸入的是```feature: First commit test```，就會看到commit報錯。
這裡是表示type不符合(應是"feat")，而且冒號後的首字不該大寫。
---
### Step5. 安裝[自動化CHANGELOG生成](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli)
- 如果所有Commit 都確實符合Angular格式，那麼發布新版本時， CHANGELOG 就可以用script自動生成。
- 如果要在release時完全自動化生成CHANGELOG，目前還有版本號變動、Sourcetree整合等問題，所以之後研究出來再補上-/-
- 先Global安裝生成CHANGELOG的工具：
```C
npm install -g conventional-changelog-cli
```
- 這樣就可以透過以下指令，直接生成CHANGELOG.md檔案
```C
conventional-changelog -p angular -i CHANGELOG. md -s
```
- 但每次要打這段還太麻煩，所以直接把這段指令寫入package.json的script當中：
```C
"scripts" : {
"changelog" : "conventional-changelog -p angular -i CHANGELOG.md -s"
}
```
> 完成後，只要執行```npm run changelog```，就可以生成CHANGELOG了！[color=lightGreen]
---
## 總結整理
經過整理，目前發布一個新版本的流程如下：
- 確認每次的commit都有符合Angular規範，且位於Develop分支上，開啟Release，並輸入新版本的版號
- 修改package.json中的版本號到目前版本：
> 之前測試過以```npm version```來修改版本，但會和Sourcetree衝突，所以先不考慮
- 執行```npm run changelog```，生成最新版本的CHANGELOG
- 執行commit，建議以```chore```的type紀錄，也就不會被記錄進去
- 最後便可透過Git flow -> Finish Release，並寫入版本號v
- push，基本上就完成！可以在版本發佈頁看到剛剛的release
## 參考
- [《前端工程化》第一集git提交規範](https://juejin.im/post/6844903828161036302#heading-1)
- [用工具思路來規範化git commit message](https://github.com/pigcan/blog/issues/15)
- [前端CHANGELOG生成指南](https://godbasin.github.io/2019/11/10/change-log/)
- [Angular git commit message](https://my.oschina.net/u/3943503/blog/4339057)
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet