使用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'));
});</pre> 
 
此時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 $?</pre> 
 
OK，一切都配置好了！此時，每當對JS文件進行commit操作時就會通過Git Hook調用Gulp任務，若JSHint檢測通過，則commit操作成功，否則commit操作失敗。
 </div>