Grunt事始め

はじめてGruntを利用するときに行うこと。詳しくはGetting started - Grunt: The JavaScript Task Runnerを参照。

Gruntについて

Gruntはnodeで動作するJavascriptのTask Runnerで、JSHintとかディレクトリのクリーンアップとか、開発中に発生するタスクを簡単に実行できるように整備することができます。

Gruntのinstallにはnpm（Node.jsのパッケージマネージャー）を使用します。Nodeのinstallは、node.jsからインストーラーをダウンロードするか、homebrewでインストールする。sudoが必要な場合はsudoする。

1 2	[sudo] npm install -g grunt-cli

設定ファイルの用意

Gruntを使うにあたって、package.jsonと、Gruntfile.jsの二つのファイルを用意します。package.jsonはGruntで使用するplugins(task)をインストールするためのファイル（npm経由でインストールする）で、Gruntfile.jsはtaskを実行するための設定ファイル。

これらのファイルを手作業で作成することもできますが、grunt-initで用意しているtemplateで生成して、生成したファイルから不要な箇所を差し引く方が簡単（と思う）。

grunt-initのインストールは下記のような感じ

1 2	[sudo] npm install -g grunt-init

grunt-init用のtemplateはInstalling templatesにいくつか用意されていて、用途にあったものを使用する。Gruntfile.jsを生成するだけなら、grunt-init-gruntfileが良くて、Grunt pluginを作成するならgrunt-init-gruntpluginが良さそう。package.jsonも一緒に作成するならとりあえずgrunt-init-commonjsが良いかもしれない。いずれにせよあとで編集すれば良いだけなので、どれでも良いと言えばどれでも良い。

grunt-init-commonjsで例にすると

1 2	git clone git@github.com:gruntjs/grunt-init-commonjs.git ~/.grunt-init/commonjs

で、templateをダウンロードしてきて（grunt-initで使用するテンプレートは、~/.grunt-init/に入れる）、grunt-initを実行する。grunt-initは、gruntのタスクを実行したいプロジェクトのルートで行う。

cd ~/Desktop
mkdir my-project
cd my-project
grunt-init commonjs

すると、作成時の設定をいろいろ聞かれるので、いろいろ答える。全部デフォルトでもあとで変更すれば良いので大丈夫。一緒にpackage.jsonも作成されます。

grunt-init-gruntfileを使った場合など、package.jsonを別途作成する場合は

1
2
3

cd ~/Desktop/my-project
npm init

すれば簡単に作成することができる。

あとは、Gruntfile.jsとpackage.jsonを開いて、不要そうなものを適当に削る。すぐに削除しても後から削除しても良い。そして

1
2
3

cd ~/Desktop/my-project
npm install

すると、package.jsonに記述されているdevDependenciesなpluginが、node_modulesディレクトリにインストールされます。

Grunt taskの実行

これで

1
2
3

cd ~/Desktop/my-project
grunt jshint

と実行すると、Gruntfile.jsに記述されているjshintのタスクが実行されるようになります。