Gruntの使い方

Gruntを使い始めてから半年経った。Gruntは主にJavascriptとCSSファイルのminifyを自動化する目的で使用している。

Gruntとは

Gruntとは，JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）である。面倒な作業として，以下のような作業があるが，Gruntを使うことでこれらを自動化することが出来る。

• minify（圧縮）や結合
• 単体テストの実行
• JSLint（構文チェック）の実行
• CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）の実行
• SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合には，コンパイル（CSS変換）の実行

Gruntの使い方

GruntはNode.jsを使用して作られている。そのためGruntをインストールする際には，あらかじめhomebrewなどでNode.jsをインストールしておく必要がある。

Gruntのインストール

Gruntは，Grunt本体とgrunt-cliが組み合わさって動作する。そのため，Grunt本体とgrunt-cliを一緒にインストールするが，コマンドから直接インストールするのではなく，package.jsonというファイルを作成し，このファイルを介してインストールする。

package.jsonを作成し，以下のように記述する。

{    "name": "my-project-name",    "version": "0.1.0",    "devDependencies": {        "grunt": "~0.4.3",        "grunt-cli": "~0.1.9"    }}

package.jsonが存在するディレクトリで以下のコマンドを実行することで，package.jsonに記述したnodeモジュールをインストールすることが出来る。今回の場合はGruntをインストールすることが出来る。

npm install

このpackage.jsonというファイルはNode.jsのプロジェクトにおいて，そのプロジェクトの名称やバージョン，依存するモジュールを書いておくためのファイルである。Grunt自体もこのpackage.jsonを使って利用するプラグインを管理し，そしてGrunt自体もこのファイルへ依存モジュールとして登録する。
Gruntが，このような回りくどい管理方法を取っている理由は，Gruntのバージョンが異なるプロジェクトを単体のGruntでは同時に管理できない為である。
例えば，プロジェクトAではバージョン0.3.1を使っているが、プロジェクトBでは0.3.16を使っていて、マシンにはGrunt 0.3.16がインストールされている……という場合，始めのプロジェクトがビルドできなくなってしまう可能性がある。

続いてGruntfile.jsというgruntの設定ファイルを作成する。一纏めにして実行出来る個々の設定を「タスク」と呼ぶ。以下の内容でGruntfile.jsを作成する。

module.exports = function (grunt) {    grunt.registerTask('hello', 'description here', function() {        grunt.log.writeln('hello World!');    });    grunt.registerTask('default', [ 'hello' ]);};

この状態でgruntコマンドを実行する。

grunt

以下のように表示されればタスクが成功している。

Running "hello" task hello World! Done, without errors.

JavascriptとCSSを自動的にminifyしてみる

今回，冒頭で触れたJavascriptとCSSのファイルをminifyする方法を説明する。

プラグインを追加インストールする

{    "name": "my-project-name",    "version": "0.1.0",    "devDependencies": {        "grunt": "~0.4.3",        "grunt-cli": "~0.1.9",        "grunt-contrib-cssmin": "0.4.1",        "grunt-contrib-uglify": "~0.4.0",        "grunt-contrib-watch": "~0.5.3"    }}

上記のようにpackage.jsonに追記し，以下のプラグインを新たにインストールする。

• grunt-contrib-cssmin: CSSファイルをminifyする。
• grunt-contrib-uglify: JSファイルをminifyする。
• grunt-contrib-watch: ファイルの変更を監視してタスクをトリガーする。

package.jsonへ記述後，以下のコマンドでプラグインをインストールする。

npm install

Gruntfile.jsを作成する

プラグインがインストール出来たので，Gruntfile.jsにタスクを記述する。
記述例としては以下のようになる。ファイル名は適宜書き換えてほしい。

module.exports = function(grunt) {    grunt.initConfig({        cssmin : {            pc : {                src : ['css/reset.css', 'css/styles.css'],                dest : 'css/pc.min.css'            },            mobile : {                src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],                dest : 'css/mobile.min.css'            }        },        uglify : {            build : {                options : {                    banner : grunt.file.read('js/License.js'),                },                src : ['js/BitmapData.js', 'js/GlowFilter.js'],                dest : 'js/all.min.js'            }        },        watch : {            css_pc : {                files : ['css/reset.css', 'css/styles.css'],                tasks : ['cssmin', 'copy:css']            },            css_mobile : {                files : ['css/mediaqueries.css'],                tasks : ['cssmin:mobile', 'copy:css']            },            js : {                files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],                tasks : ['uglify', 'copy:js']            }        },    });    grunt.loadNpmTasks('grunt-contrib-cssmin');    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-watch');};

CSSファイルとJSファイルの変更を監視し，変更があったファイルを自動的にminifyする。
エラーなどが出ずにminifyが正常に行われていれば成功である。

また，ファイルの変更を監視（grunt-contrib-watchを使用）しない場合はgruntコマンドを実行することでminifyを行うことが出来る。

grunt

各プラグイン毎の設定方法は以下のページに詳しく載っていた。
Plugins – Grunt: The JavaScript Task Runner

参考
現場で使えるGrunt入門 – Gruntを試そう | CodeGrid
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp
Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – ＠IT