Windowsでのgrunt環境構築

Web開発周りの様々な作業を自動化してくれるという、とってもキュンキュンしてしまうgruntをWindowsにて環境構築した際のメモ。
gruntが行えるタスクの一例としては、

・構文チェック
・ファイル結合（複数のjsファイルを単一ファイルにするなど）
・メタ言語コンパイル（CSSプリプロセッサやCofeeScript・TypeScriptなど）
・ファイル最適化
・Backbone.jsやAngularJSで利用するtemplateの外部ファイル化

etc...

nodistのインストール

gruntはnode.jsをベースとして動作しているため、まずnode.jsの環境構築が必要となる。
今回はnode.jsのバージョン管理が行えるWindows用ツール、nodistを使って環境構築を行う。

ダウンロード

GitHubからzip形式でのダウンロード、もしくはgit cloneにて取得。
https://github.com/marcelklehr/nodist

任意の場所に配置する。
今回はCドライブ直下に配置。

C:\nodist

環境変数の設定

nodistフォルダへのパスを通す。
まずは新規にシステム環境変数を作成。

変数名 NODIST_HOME
変数値 C:\nodist

さらに、既存のシステム環境変数Pathの値に、以下を追加。
既に入力されている値の最後に;がない場合、必ず;を入れてから追記すること。

追加する変数値 %NODIST_HOME%\bin;

インストール後の確認

コマンドプロンプトを開き、nodist -vを叩いてバージョン名が表示されれば、nodistのインストールは問題なく終了している。

cmd.exe

>nodist -v
0.4.8

node.jsのインストール

次に、nodistを使ってnode.jsのインストール作業を行ってゆく。
コマンドプロンプトにて、nodist upateを実行。

ずらずらと表示されるのでお茶を飲みながら待つ。

終了したらnode -vコマンドでインストールされたか確認。

cmd.exe

>node -v
v0.10.24

gruntのインストール

いよいよ本命のGruntのインストール作業である。
node.jsと一緒に入ってきた、npmコマンドを使ってgruntをインストールする。
ここでインストールするパッケージはgrunt本体のgruntではなくgrunt-cli(grunt command line interface)である点に注意すること。
grunt-cliは、任意のディレクトリにインストールされたgruntを実行するために必要なパッケージである。

※grunt本体は後ほど、作業対象のディレクトリにインストールする。

cmd.exe

>npm install -g grunt-cli

※-gオプションはグローバル化（どこでもコマンドが叩けるようにする）

作業ディレクトリへの移動と、package.jsonの作成

cdコマンドを使い、任意の作業対象ディレクトリへ移動する。
移動が完了したら、npm initコマンドを実行し、package.jsonファイルを生成する。

いくつか入力が要求されるが、ここで入力できるものは動作に必ず必要なものではないので、Enterで飛ばしても構わない。

作業ディレクトリへgrunt本体インストール

grunt本体をインストールする。

cmd.exe

npm install grunt -save-dev

※-save-dev installしたパッケージの情報を、package.jsonへ自動追記する。

以上で対象の作業ディレクトリでのgruntの実行が可能となったので、めくるめく楽しいgrunt人生が送れる。
gruntで使用するいくつかのプラグインについては別項で解説予定。

補足：Gruntfile.jsのひな形

Gruntfile.js

module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
            // タスクの設定を記述
    });
    // プラグインのロードやタスクの登録
};

突っ込みどころ、盛大に間違っている部分等ありましたら是非ご指摘ください。