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({
            // タスクの設定を記述
	});
    // プラグインのロードやタスクの登録
};

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