Gruntをインストールして、実際に使ってみる

Gruntをインストールして、使ってみたので手順をメモしておきます。

1. Node.jsをインストールする

本サイトからインストールする。
http://nodejs.org/

f:id:kgmx:20140726164940p:plain

$ node -v
v0.10.29

これでnmpコマンドが使えるようになったので、NPMに登録されているモジュールをインストールできる。

モジュールは以下のコマンドでインストールする。

$ npm install モジュール名

grunt-cli（grunt command line interface）とはGrunt本体ではなく、各ディレクトリにインストールされたGruntを実行するためのGruntコマンド。

$ npm install -g grunt-cli

Please try running this command again as root/Administrator

エラー(´･ω･`;)

調べてみると、sudoをつける必要があるかもとのことだったので、つけたらインストールできた。インフラエンジニアの方にあんまりsudoは使わないでねって言われ続けたけど…内緒にしておこう…

$ sudo npm install -g grunt-cli

管理者パスワードの入力が求められるので、パスワードを入力してenterを押すとインストールできた。

注意点1：Gruntのバージョンが0.3から0.4に上がったことで仕様が変わり、0.4ではプロジェクトごとにGruntやプラグインをインストールして使用する。 0.3をインストールしている場合は、まずアンインストールをする。

注意点2：-gとつけ、グローバルにインストールしておく。インストールするモジュール（今回の場合はgrunt-cli）がコマンドラインから利用できるように作られていれば、どこからでもそのコマンドが利用できるようになるため。

app配下で実行する

$ npm init

プロジェクトの名称、バージョン、作成者などの情報を聞かれるので、ターミナル上で入力する。すると、こんな感じでapp配下にpackage.jsonが生成された。

f:id:kgmx:20140726171818p:plain

中身は以下。

注意点：今回はappというプロジェクトをあらかじめ作成しておいた。中身はまだ空っぽ(´･ω･`;)

f:id:kgmx:20140726180455p:plain

$ npm install grunt --save-dev

注意点：--save-devと後ろにつけることで、そのプロジェクトで使用しているパッケージ情報をpackage.jsonに保存してくれる。devDependenciesの項目にgruntが追加された。

app配下にnode_modulesというフォルダが作成され、その中にgruntが入った。

f:id:kgmx:20140726173324p:plain

Gruntfile.jsはGruntで行いたいタスク一覧を記述するファイルです。

package.jsonと同じ階層に作成する。

$ npm install grunt-contrib-watch -save-dev

package.jsonに情報が追記される。

※プラグインをインストールすると、node_modulesの中に入る。

f:id:kgmx:20140726175401p:plain

index.htmlを適当に変更してみる。

$ grunt watch
Running "watch" task
Waiting...
>> File "index.html" changed.
Completed in 0.001s at Sat Jul 26 2014 14:53:46 GMT+0900 (JST) - Waiting…

ちゃんと監視されているようです。