grunt を利用するためのメモ

これはオリジナルの grunt タスクを作成するための簡単なメモです。入門の中でも一番最初に理解すべき事柄を記載します。

この内容は 2013/10/26 に行われた HTML5ハッカソンの内容を記載しています。

必要なもの

前提条件として grunt の実行環境（npm や node 等）はインストール済みとします。

grunt を利用するためには

• package.json
• Gruntfile.js

を記載する必要があります。

package.json は npm install コマンドを発行することで必要な grunt-* ファイルをダウンロードします。

Gruntfile.js は grunt タスクが登録されたファイルです。

具体的に見てみます。

package.json

{
  "name": "grunt-demo",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-connect": "0.3.0",
    "grunt-contrib-livereload": "0.1.2",
    "grunt-regarde": "~0.1.1",
    "grunt-open": "~0.2.0",
    "matchdep": "~0.1.2"
  },
  "engines": {
    "node": ">=0.8.0"
  }
}

package.json には Gruntfile.js で使用する grunt-*が登録されています。このファイルが定義されているディレクトリと同じ位置で npm install コマンドを発行すると grunt-* 郡をダウンロードし node_modules ディレクトリへ格納します。

Gruntfile.js 

'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// grunt の定義
module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
        app: 'app'
    };

    // grunt の初期化
    grunt.initConfig({
        yeoman: yeomanConfig,
        watch: {
            livereload: {
                files: [
                    '<%= yeoman.app %>/*.html'
                ],
                tasks: ['livereload']
            }
        },
    	connect: {
            options: {
                port: 9000,
                // change this to '0.0.0.0' to access the server from outside
                hostname: 'localhost'
            },
            livereload: {
                options: {
                    middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, 'app')
                        ];
                    }
                }
            }
        },
        open: {
            server: {
                path: 'http://<%= connect.options.hostname %>:<%= connect.options.port %>'
            }
        }
    });

    grunt.renameTask('regarde', 'watch');

    // タスクの定義
    grunt.registerTask('server', function (target) {
        grunt.task.run([
            'connect:livereload',
            'open',
            'watch'
        ]);
    });
}

この grunt タスク定義は grunt server コマンドを発行したときに app/index.html をブラウザへ表示するためのタスクです。

Gruntプロジェクトを作成するためのツール

Grunt プロジェクトを作成するためには grunt-init を利用すると簡単に定義することができます。grunt-init はプロジェクトを自動生成するのに使用されるScaffoldingツールです。

npm install -g grunt-init

でインストールして下さい。使い方についてはプロジェクトのScaffolding を参照ください。