# 標準化Commit & CHANGELOG 自動化流程 ## 概要 由於每次建完新版本後，若是每次都需手動打上完整的CHANGELOG，真的很麻煩。故此處紀錄一下如何進行標準化的commit，並能由Script生成自動的CHANGELOG。 ## 事前準備 首先須確認專案有採用Gitflow，到時需照著Develop -> Release 的方式進行建立。 目前採用的自動化方法，是基於Angular所規範的commit格式所生成，故需要先建立一個node js的環境，透過package.json紀錄。 - 執行： ```C= npm init ``` - 設定好專案內容後，會看到基本的package.json被建立出來。![](https://i.imgur.com/2JJ3lrC.png) ## 規範化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報錯。 ![](https://i.imgur.com/6JONQEL.png) 這裡是表示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，並輸入新版本的版號 ![](https://i.imgur.com/xeKiXJk.png) - 修改package.json中的版本號到目前版本： ![](https://i.imgur.com/f5fteHi.png) > 之前測試過以```npm version```來修改版本，但會和Sourcetree衝突，所以先不考慮 - 執行```npm run changelog```，生成最新版本的CHANGELOG - 執行commit，建議以```chore```的type紀錄，也就不會被記錄進去 - 最後便可透過Git flow -> Finish Release，並寫入版本號v ![](https://i.imgur.com/R9JE80u.png) - push，基本上就完成！可以在版本發佈頁看到剛剛的release ![](https://i.imgur.com/TjP0iGX.png) ## 參考 - [《前端工程化》第一集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)