使用Git Hook, Gulp及JSHint来保证JavaScript代码质量

随着Web项目中用到的JavaScript越来越多，以及项目中参与人数的增加，保证JavaScript的代码质量尤为显得重要。一方面可以形成统一的代码风格，方便团队之间协作，另一方面也可以提高代码的可读性，方便以后的维护。

今天主要来介绍一下如何结合 Git Hook , Gulp 及 JSHint 来检测JavaScript代码，从而保证JavaScript的代码质量。

需要的环境及工具

• Node.js

• Gulp

• JSHint

• Git

配置JSHint

JSHint是一个用来检测JavaScript代码质量的工具，类似的还有ESLint, JSCS等。

首先需要全局安装JSHint:

npm install -g jshint

然后在项目根目录中添加 .jshintrc 文件，添加你的配置项，如「驼峰命名」、「单引号」、「严格模式」等：

{    "node": true,    "esnext": true,    "bitwise": true,    "camelcase": true,    "curly": true,    "eqeqeq": true,    "immed": true,    "indent": 2,    "latedef": true,    "newcap": true,    "noarg": true,    "quotmark": "single",    "undef": true,    "unused": true,    "strict": true  }

具体配置可以根据团队需要自行调整，更多配置项可以 参考官网 。

为了能够实时检测代码中的语法，可以给代码编辑器安装JSHint的插件，例如Sublime Text，可以安装 SublimeLinter 及 SublimeLinter-jshint 这两个插件。

配置Gulp Task

Gulp是一个自动化构建工具，可以自动执行一些常见的任务，如SASS编译、文件压缩、代码合并等，极大的提高了我们的工作效率，类似的工具还有 Grunt 。

首先需要全局安装Gulp:

npm install -g gulp

然后在项目中创建 gulpfile.js 文件，添加task。接下来我们给JavaScript的检测添加一个task，并安装相关依赖。

所用到的NPM包：

{    // ...    "devDependencies": {      "gulp": "^3.9.0",      "gulp-jshint": "^2.0.0",      "gulp-load-plugins": "^1.2.0",      "jshint": "^2.9.1",      "jshint-stylish": "^2.1.0",      // ...    }    // ...  }

'use strict';    var gulp = require('gulp');  var $ = require('gulp-load-plugins')();    gulp.task('lint:js', function () {    return gulp.src([      './static/js/**/*.js',    ]).pipe($.jshint())      .pipe($.jshint.reporter('jshint-stylish'))      .pipe($.jshint.reporter('fail'));  });

此时Gulp任务已经配置好了，可以先测试一下：

gulp lint:js

如果有JS文件不符合规范，则会给出提示信息。如果希望忽略某些JS文件，可以添加 .jshintignore 配置文件，写法跟 .gitignore 类似。

添加Git Hook

Git和其它版本控制工具类似，当某些重要的操作发生时，可以调用自定义的脚本，这些脚本可以称作是Hooks(钩子)。这里的JS代码检测可以用提交工作流钩子来处理。

在项目的根目录里会有 .git 文件夹，然后找到放置hooks的位置：

.git/hooks  ├── applypatch-msg.sample  ├── commit-msg.sample  ├── post-update.sample  ├── pre-applypatch.sample  ├── pre-commit.sample  ├── pre-push.sample  ├── pre-rebase.sample  ├── prepare-commit-msg.sample  └── update.sample

这里放置了一些示例文件，其中我们用到的是 pre-commit.sample ，我们把后缀 .sample 去掉即可生效。然后添加脚本，使进行commit操作时，调用Gulp任务。

#!/bin/sh    if git diff --cached --name-only --diff-filter=ACM | grep '.js'  then    gulp lint:js  fi    exit $?

OK，一切都配置好了！此时，每当对JS文件进行commit操作时就会通过Git Hook调用Gulp任务，若JSHint检测通过，则commit操作成功，否则commit操作失败。