主要內(nèi)容
- Git Hooks https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
-
pre、post的鉤子機(jī)制 - npm script 中Git Hooks的使用
Git Hooks（鉤子）
- 官網(wǎng)傳送門：https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
- 什么是Git Hooks外厂？
Git has a way to fire off custom scripts when certain important actions occur续滋。（Git有一種在發(fā)生某些重要操作時(shí)觸發(fā)自定義腳本的方法主籍，俗稱鉤子，類似生命周期的方法） -
鉤子存放目錄：.git/hooks
如下圖所示，作者本地目錄
image.png - 鉤子機(jī)制能讓我們在代碼 commit、push 之前（后）做自己想做的事情
Git Hooks 用法：
- 以
pre-commit.sample為例侮东，只需要將pre-commit.sample重命名為pre-commit，pre-commit腳本就生效了 - pre-commit中編寫腳本（對(duì)將要提交的代碼進(jìn)行檢查豹芯、優(yōu)化代碼格式悄雅、或者對(duì)提交的圖片進(jìn)行壓縮等等任務(wù)）
STAGE_FILES=$(git diff --cached --name-only --diff-filter=ACM -- '*.vue' '*.js')
if test ${#STAGE_FILES} -gt 0
then
echo '開始eslint檢查'
which eslint &> /dev/null
if [[ "$?" == 1 ]]; then
echo '沒安裝eslint'
exit 1
fi
PASS=true
for FILE in $STAGE_FILES
do
eslint $FILE
if [[ "$?" == 1 ]]; then
PASS=false
fi
done
if ! $PASS; then
echo "eslint檢查沒通過！"
exit 1
else
echo "eslint檢查完畢"
fi
else
echo '沒有js文件需要檢查'
fi
exit 0
- eslint最好全局安裝铁蹈，必須要保證執(zhí)行hooks的git目錄下能夠直接執(zhí)行宽闲。
- .git里面的文件，無法提交到git項(xiàng)目上去，所以最好在git目錄最外層新建一個(gè)同名的hooks文件夾便锨，把寫好的腳步放里面围辙。新clone該項(xiàng)目時(shí)，在根目錄執(zhí)行一下cp hooks/* .git/hooks/把腳本文件復(fù)制到.git里去放案。
- 有時(shí)候也會(huì)遇到腳本文件沒有執(zhí)行權(quán)限的情況，這時(shí)hooks就無法生效矫俺，需要用到chomd指令給腳本文件加上執(zhí)行權(quán)限吱殉。
Git hooks 跳過驗(yàn)證 --no-verify
- 示例
git commit --no-verify –m"XXX"
使用 --no-verify（簡寫為 -n） 參數(shù)跳過本地檢查時(shí)，本地檢查就形同虛設(shè);
Git Hooks 和 前端結(jié)合產(chǎn)物
相比較而言 husky 更好用厘托，它支持更多的 Git Hooks 種類
husky 和 lint-staged的使用
- 安裝項(xiàng)目依賴 （ husky友雳、lint-staged）
npm i husky lint-staged -D
# npm install husky lint-staged --save-dev
# yarn add husky lint-staged -D
- husky 的基本工作原理(package.json: https://github.com/typicode/husky/blob/master/package.json)
截取其中部分（注意看install腳本）：
{
"scripts": {
"test": "jest",
"format": "prettier --single-quote --no-semi --write **/*.js",
"install": "node ./bin/install.js",
"uninstall": "node ./bin/uninstall.js"
}
}
-
安裝完成后，本地目錄
.git/hooks中的鉤子都被 husky 替換
image.png 項(xiàng)目中添加 npm script
"scripts": {
+ "precommit": "npm run lint",
+ "prepush": "npm run test",
"lint": "npm-run-all --parallel lint:*",
"lint:js": "eslint *.js",
然后嘗試提交代碼：git commit -am 'add husky hooks'铅匹，能看到 pre-commit 鉤子已經(jīng)生效押赊，如圖：
image.png
用 lint-staged 改進(jìn) pre-commit
- lint-staged：只檢查當(dāng)次改動(dòng)的文件(不用全篇檢查)
- 添加腳本如下：
"scripts": {
- "precommit": "npm run lint",
+ "precommit": "lint-staged",
"prepush": "npm run test",
"lint": "npm-run-all --parallel lint:*",
},
+ "lint-staged": {
+ "*.js": "eslint",
+ "*.less": "stylelint",
+ "*.css": "stylelint",
+ "*.json": "jsonlint --quiet",
+ "*.md": "markdownlint --config .markdownlint.json"
+ },
"keywords": [],
接下來我們故意在 index.js 中引入錯(cuò)誤：
- return NaN;
+ return NaN
然后嘗試提交這個(gè)文件：git commit -m 'try to add eslint error' index.js，結(jié)果如下圖：
image.png
帶有 Running Tasks 字樣的列表就是 lint-staged 根據(jù)當(dāng)前要提交的文件和 package.json 中配置的檢查命令去執(zhí)行的動(dòng)態(tài)輸出包斑。紅色框里面提示 husky 的 pre-commit 鉤子執(zhí)行失敗流礁，提交也就沒有成功。
- 更多用法
lint-staged
