npm script工作流(十一) Git Hooks

主要内容 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

本文章由javascript技术分享原创和收集