GRUNT とJSHintのコードチェックをビルドプロセスに組み込む

はじめに

JavaScript にはJSHintというコードチェッカーが存在する。このチェッカーの実行を、タスク実行ツールGRUNTを使ってビルドプロセスの中に組み込む方法を試してみた。

以下の英語のブログ記事を参考にした。 Let tools define JavaScript style

GRUNT とは？

GRUNT は、JSファイルのminifyやコンパイル、テスト、コードチェック等の様々なタスクを実行してくれるタスク実行ツール。用途に応じたプラグインを利用することができる。プラグインの一覧はこちら。

GRUNTとcontrib-jshintプラグインのインストール

まずgruntのCLIツールをインストール

npm install -g grunt-cli

次にプロジェクトのpackage.jsonにgruntとgrunt-contrib-jshintを記述してnpm installを実行。

  "dependencies": {
    "grunt": "*",
    "grunt-contrib-jshint": "*"
   }

grunt-contrib-jshintはGruntでJSHintチェッカーを実行するためのプラグイン)。

.jshintrcの設定

.jshintrc はJS Hintのパラメータを指定するための設定ファイル。プロジェクト直下に配置。以下サンプル

{
  "curly": true,
  "eqnull": true,
  "eqeqeq": true,
  "evil": false,
  "forin": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "maxdepth": 5,
  "maxparams": 5,
  "maxlen": 80,
  "trailing" : true,
  "undef": true,
  "unused": true,
  "node": true,
  "jquery": true,
  "browser" : true,
  "globals": {
    "describe" : false,
    "it": false,
    "before": false,
    "after": false,
    "define": false
  }
}

パラメータの内容、記述方法は JSHintのドキュメントページや、Qiitaの以下のページを参考にするとよい

JSHint入門 - JSHintを使ってJSコードの信頼性を高める

もしも対象外としたいファイル（ライブラリ等）が存在する場合は.jshintignoreファイルを記述してプロジェクト直下に配置する。

Gruntfile.js の作成

GRUNTの設定はプロジェクト直下にGruntfile.jsというファイルを配置して記述。

サンプル

module.exports = function (grunt) {

  grunt.initConfig({
    jshint: {
      files: [
        'Gruntfile.js',
        'routes/**/*.js',
        'package.json',
        'test/**/*.js',
        '*.js',
        '.jshintrc'
      ],
      options: {
        jshintrc: '.jshintrc'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('build', ['jshint']);

};

この中の一番外側の以下記述はGruntfile.jsを記述するときの基本。

module.exports = function (grunt) {
  ...
};

initConfig()で各プラグインへの設定項目を指定する。jshint.filesはコードチェックの対象となるファイル。

loadNpmTasks()でプラグインをロードし、

grunt.loadNpmTasks('grunt-contrib-jshint');

registerTask()でタスクを登録している

grunt.registerTask('build', ['jshint']);

Gruntの実行

gruntコマンドで登録したタスク名を指定してあげればOK.

grunt build

Running "jshint:files" (jshint) task
>> 11 files lint free.

Done, without errors.