この記事は賞味期限切れです。（更新から1年が経過しています）

以前はmakeを使って納品用のデータをビルドしていたりしたのですが、 去年くらいから代替にGruntを使ってみています。 この度0.3.xから0.4系に切り替えたので、覚書も兼ねてGruntの導入・使い方を記しておきます。

1. Gruntってなに
2. Gruntを導入する
3. 使ってみよう
4. どんなタスクがあるの？
5. その他Gruntの魅力
6. まとめ

Grunt ってなに

• GRUNT: The JavaScript Task Runner

Gruntはnode.jsベースで作られたタスクベースのコマンドラインビルドツールです。

ビルドツールってなに

ビルドは、ソースファイル群を元にして、実行出来る成果物を生成するプロセスの事を指します。

cf) ビルド (ソフトウェア) – Wikipedia

鍋に鶏と野菜とコンソメを入れて煮込んだらポトフが出来るとして、 鍋の役割を担ってくれるのがビルドツールです。（そんな認識であっているかな？） レシピを設定しておくことが出来るので、いつでもすぐに美味しいポトフがお楽しみ頂けます。

具体的には、Web制作では主にJavaScriptファイルを結合・圧縮したり、 Less/Sass/Stylus等のCSSプリコンパイラの結果を生成したり、 画像の最適化などを行い、最終的に動作するWebページにしていきます。

Gruntを導入する

インストール

まずはGruntを導入してみます。node.jsベースなのでまず node.jsをインストールし、

$ npm install -g grunt-cli

等とします。環境によってはsudo等が必要です。

grunt-cli はローカルにインストールされたgruntを呼び出すだけの係の人なので、 別途gruntも入れておく必要があります。プロジェクトルートか、あるいはその親ディレクトリにインストールしておきましょう。

$ npm install grunt

使ってみよう

Gruntfile.js

プロジェクトディレクトリに Gruntfile.js ファイルを用意して設定を記述し、 そのディレクトリで grunt コマンドを実行するとビルドが始まります。

Gruntfile.js の中身は、例えば次のようになります。

module.exports = function(grunt){

    // `loadnpmTasks`で使用したいタスクを読み込んでおく
    grunt.loadNpmTasks("grunt-contrib-uglify");

    // `initConfig` で基本設定
    grunt.initConfig({
        uglify : {
            dist : {
                src : ["assets/js/script.js"],
                dest : "assets/js/script.min.js"
            }
        }
    });

    // `registerTask` でタスクに名前をつける
    // "default" でデフォルトのタスクを設定
    grunt.registerTask("default", ["uglify"]);

};

タスクについて

Gruntに命令する処理を「タスク」と呼びます。

上の例では”uglify”というタスクに、”dist”という作業を任せています。 “uglify”はuglify.js を使用してJavaScriptの圧縮を行なってくれるタスクで、 “src” にあるファイルリストをひとまとめにして圧縮した結果を “dest” のファイルに保存します。

タスクははじめから入ってるわけではないので、 使いたい物を都度インストールしましょう。

$ npm install grunt-contrib-uglify

ビルドの実行

上の例ではデフォルトのタスクにuglifyが設定されているので、引数なしで

$ grunt

とすればタスクが実行され、assets/js/script.js を圧縮した結果が assets/js/script.min.js として保存されます。

タスクを指定して実行したい場合は、引数にタスクの名前を渡します。

$ grunt uglify # <= uglifyタスクを実行
$ grunt uglify:dist # <= minタスクのdistという名前の作業を実行

どんなタスクがあるの？

以下が代表的だと思しきプラグインです。 （”contrib” とついている物は公式のものです。） 使いたい物を npm install でインストールし、 loadNpmTasks で読み込んで使用しましょう。

• grunt-contrib-concat – ファイルを結合します
• grunt-contrib-uglify – JavaScriptファイルを圧縮します
• grunt-contrib-cssmin – CSSファイルを圧縮します
• grunt-contrib-watch – ファイルの更新を監視して任意のタスクを実行します
• grunt-contrib-copy – ファイルやディレクトリをコピーします
• grunt-contrib-clean – ファイルやディレクトリを削除します

具体的な設定例等は、各リポジトリのREADMEをご覧ください。 また、その他にも多くのタスクがあるので使えそうな物があったらピックアップしてみるといいでしょう。

• Plugins – Grunt: The JavaScript Task Runner

その他Gruntの魅力

なんといっても、JavaScriptベースである為にプラグイン開発が非常に身近にある点だと思います。

cf) Creating tasks – Grunt: The JavaScript Task Runner

JavaScriptに心得のある人ならば、自分が使いやすいようなタスク・プラグインを自前で開発して、 自分好みの開発環境を構築していく事が出来ます。 また、その為に便利なインターフェイスも十分整備されています。 有用なプラグインが書けたら、npmにパブリッシュしておけばいつでも使えますね。

まさにnode様様といったところです。

まとめ

Grunt の概要をざっくり紹介しました。

これだけではそこまで有用と思われないかもしれませんが、 多くのコーダーさんにとって威力を発揮するのは、やはりCSSプリコンパイラのビルドだと思います。 後編ではそのあたりを紹介してみます。