使用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操做失败。