主要内容
- Git Hooks https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
-
pre、post的钩子机制 - npm script 中Git Hooks的使用
Git Hooks（钩子）
- 官网传送门：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有一种在发生某些重要操作时触发自定义脚本的方法，俗称钩子，类似生命周期的方法） -
钩子存放目录：.git/hooks
如下图所示，作者本地目录
image.png - 钩子机制能让我们在代码 commit、push 之前（后）做自己想做的事情
Git Hooks 用法：
- 以
pre-commit.sample为例，只需要将pre-commit.sample重命名为pre-commit，pre-commit脚本就生效了 - pre-commit中编写脚本（对将要提交的代码进行检查、优化代码格式、或者对提交的图片进行压缩等等任务）
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最好全局安装，必须要保证执行hooks的git目录下能够直接执行。
- .git里面的文件，无法提交到git项目上去，所以最好在git目录最外层新建一个同名的hooks文件夹，把写好的脚步放里面。新clone该项目时，在根目录执行一下cp hooks/* .git/hooks/把脚本文件复制到.git里去。
- 有时候也会遇到脚本文件没有执行权限的情况，这时hooks就无法生效，需要用到chomd指令给脚本文件加上执行权限。
Git hooks 跳过验证 --no-verify
- 示例
git commit --no-verify –m"XXX"
使用 --no-verify（简写为 -n） 参数跳过本地检查时，本地检查就形同虚设;
Git Hooks 和 前端结合产物
- pre-commit
- husky
相比较而言 husky 更好用，它支持更多的 Git Hooks 种类
husky 和 lint-staged的使用
- 安装项目依赖 （ 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 项目中添加 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 钩子已经生效，如图：
image.png
用 lint-staged 改进 pre-commit
- lint-staged：只检查当次改动的文件(不用全篇检查)
- 添加脚本如下：
"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 中引入错误：
- return NaN;
+ return NaN
然后尝试提交这个文件：git commit -m 'try to add eslint error' index.js，结果如下图：
image.png
带有 Running Tasks 字样的列表就是 lint-staged 根据当前要提交的文件和 package.json 中配置的检查命令去执行的动态输出。红色框里面提示 husky 的 pre-commit 钩子执行失败，提交也就没有成功。
- 更多用法
lint-staged