「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

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