search
LoginSignup
52

More than 5 years have passed since last update.

posted at

updated at

Organization

「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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
52