「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つ!
initConfigloadNpmTasksregisterTask
↓↓

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の部分はsrcdestに分けて記述することも可能。意味は同じ。
  • grunt uglifyを実行すると、all.min.jstest.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

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