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