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