「Grunt導入方法」と「便利なプラグイン」

Gruntとは

Gruntとは、タスク自動化ツールです。

▼公式ページ
http://gruntjs.com/

Gruntfile.jsというファイルに設定を書けば、JSのminifyや結合、CSSのminifyや結合などを自動で行ってくれます。

Gruntを使うまでの大まかな流れは、

• 1.Node環境整える
• 2.gruntコマンドを使えるようにする
• 3.package.jsonという設定ファイルを作成（npm init）
• 4.gruntを入れる
• 5.Gruntfile.jsという設定ファイルを作成
• 6.npm install 入れたいプラグイン --save-dev
• 7.Gruntfile.jsに設定を追記

（1-5は最初に1回やればOK）
（6,7は自動化させたいタスクを増やすたびに実行）

Gruntの導入方法

1.Nodeインストール

GruntはNodeで動くので、まずはNodeを入れる必要があります。入れ方は下記を参考に好きな方法で入れてOK！

公式サイトからダウンロードする方法

▼公式サイト
http://nodejs.org/

▼日本語ページ
http://nodejs.jp/nodejs.org_ja/docs/v0.10/

ndenvを用いてダウンロードする方法

▼バージョン管理しやすいので、個人的にはこれがイチオシ！
http://qiita.com/shuntaro_tamura/items/1a5883a24cd8d2579012

2.gruntコマンド使えるようにする

npm install -g grunt-cli

gruntコマンド自体はグローバルで使えた方が便利なので、-gオプションつける。

3.package.json作成

package.jsonはプロジェクトごとに必要。
gruntを使いたいプロジェクトがあるフォルダにて、

npm init

をしよう。（git管理したいフォルダ上でgit initするのと同じノリ）

npm initすると、プロジェクト名やその説明など、いくつか対話形式で質問をされるが、全てそのままエンターキーを押していってOK！
（あとで変えたければpackage.jsonを書きかえればよい）

package.jsonは依存環境のバージョンなどを管理してくれる設定ファイル。
package.jsonの例はこんな感じ↓↓

{
  "name": "testProject",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

上記はnpm init直後の例。
gruntでプラグイン入れた状態の例はこんな感じ↓↓

{
  "name": "testProject",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.4",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-jst": "~0.6.0",
    "grunt-contrib-sass": "^0.8.1",
    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-notify": "^0.3.1",
    "grunt-sassdoc": "^0.4.3",
    "grunt-typescript": "~0.3.0",
    "load-grunt-tasks": "~0.2.0",
    "time-grunt": "~0.2.1",
    "uglify-save-license": "~0.4.0"
  }
}

4.gruntを入れる

gruntを使いたいプロジェクトの場所で、

npm install grunt --save-dev

をたたけばOK！
--save-devをつけることで、package.jsonの"devDependencies"の欄に（gruntの）バージョンを自動追記してくれる。

今後便利なgruntのプラグインを入れる際、毎回--save-devをつけるのがおすすめ。

（gruntはプロジェクトごとに設定を作るものなので、-gオプションはつけない）

5.Gruntfile.jsを作成

package.jsonを作ったところと同じ場所に、Gruntfile.jsを作る。
（Gruntfile.coffeeでも可）

vim Gruntfile.js

Gruntfile.jsに必要な項目は大きく3つ！
（initConfig、loadNpmTasks、registerTask）
↓↓

module.exports = function(grunt){

  grunt.initConfig({
    //ここに実行内容を記述（uglifyは1例）
    uglify: {
      dist: {
        files: {
          'all.min.js': ['all.js']
        }
      }
    }
  });

  //プラグインからタスクを読み込む（uglifyは1例）
  grunt.loadNpmTasks('grunt-contrib-uglify');

  //タスクの登録
  grunt.registerTask('default', ['uglify']);

}

• initConfig　→　処理内容を記述。つまり必須項目。
• loadNpmTasks　→　これを書かないとプラグインを読み込めない。つまり、必須項目。（実はこれを書かずに済む方法もあるが、それは後述）
• registerTask　→　grunt uglifyとコマンド叩けば実行自体はできるので、タスクの登録は必須ではない。が、登録しないとgrunt使ってる意味無い。複数の処理をまとめてタスクを登録すべき。

6.自動化で使いたいプラグインをインストール

プラグインは、gruntの公式ページから見つけるのが便利かつ正確。
http://gruntjs.com/plugins

例えば、uglify（JSのminify）を入れたければ、

npm install grunt-contrib-uglify --save-dev

• package.jsonに記述すべく、--save-devはつけよう

7.インストールしたプラグインを使うために、Gruntfile.jsに設定を記述

例えば、uglify（JSのminify）をgruntで行いたければ、Gruntfile.jsに以下を記述すればOK！

module.exports = function(grunt){

  grunt.initConfig({
    uglify: { //←uglifyでないとダメ
      dist: { //←distは、distでなくても好きな名前でOK
        files: { //←ここはfilesじゃないとダメ
          'all.min.js': ['all.js']
        }
      }
    }
  });

  //プラグインからタスクを読み込む
  grunt.loadNpmTasks('grunt-contrib-uglify');

  //タスクの登録
  grunt.registerTask('default', ['uglify']);

}

• 上記だと、all.jsというファイルをminify化して、all.min.jsを作成
• grunt defaultとコマンド叩けば、uglifyが実行される
• defaultに限り、省略可能なので、単にgruntコマンド叩くだけでもuglifyが実行される

module.exports = function(grunt){

  grunt.initConfig({
    uglify: { //←uglifyでないとダメ
      dist: { //←distは、distでなくても好きな名前でOK
        files: { //←ここはfilesじゃないとダメ
          'all.min.js': ['all.js']
        }
      },
      dist2: {
        src: ['test.js'],
        dest: 'test.min.js'
      }
    }
  });

  //プラグインからタスクを読み込む
  grunt.loadNpmTasks('grunt-contrib-uglify');

  //タスクの登録
  grunt.registerTask('default', ['uglify']);

}

• filesの部分はsrcとdestに分けて記述することも可能。意味は同じ。
• grunt uglifyを実行すると、all.min.jsとtest.min.jsが両方生成される。
• grunt uglify:distをたたくと、all.min.jsのみ生成される。

8.さらにgruntで実行したいタスクを追加する

今回はconcat（ファイルの結合）を追加する例を記述する。

npm install grunt-contrib-concat --save-dev

を叩いてconcatインストール。
Gruntfile.jsは、下記。

module.exports = function(grunt){

  grunt.initConfig({
    uglify: { //←uglifyでないとダメ
      dist: { //←distは、distでなくても好きな名前でOK
        files: { //←ここはfilesじゃないとダメ
          'all.min.js': ['all.js']
        }
      },
      dist2: {
        src: ['test.js'],
        dest: 'test.min.js'
      }
    },
    concat { //←concatじゃないとダメ
      js: { //←jsじゃなくても好きな名前でOK
        files: { //←ここはfilesじゃなきゃダメ
          'all.js': [
            'hogehoge.js',
            'hogefuga.js',
            'pikapika.js',
            'nullhoge.js'
          ]
        }
      }
    }
  });

  //プラグインからタスクを読み込む
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  //タスクの登録
  grunt.registerTask('default', ['concat', 'uglify:dist']);

}

gruntコマンド叩くと、defaultで設定したタスクを順に実行。
（上記だと、4つのjsファイルをconcatしてall.jsを作成し、minify化したall.min.jsを作る）

便利なプラグイン

grunt-contrib-watch

watchさせておけば、変更を保存するたびにタスクを実行することが可能。gruntの醍醐味の1つ。超便利。
▼公式ページ
https://www.npmjs.org/package/grunt-contrib-watch

grunt-csso

cssのminify。これもよく使う。
▼公式ページ
https://www.npmjs.org/package/grunt-csso

load-grunt-tasks

require('load-grunt-tasks')(grunt, {
  config: 'package.json',
  scope: 'devDependencies'
});

これをmodule.exports = function(grunt){ }の中、initConfigの上に記述しておけば、loadNpmTasksの記述は全て省略できる。
プラグイン数が増えた時、すごく便利。
▼公式ページ
https://www.npmjs.org/package/load-grunt-tasks

time-grunt

require('time-grunt')(grunt);

これをmodule.exports = function(grunt){ }の中、initConfigの上に記述しておけば、gruntで実行したタスクにかかった時間をCLI上に表示できる。
▼公式ページ
https://www.npmjs.org/package/time-grunt

（他にも便利なプラグインはたくさんあるけど、それはまたいつか追記します）