PhpStormでGruntを使う


PhpStormでGruntを使う方法をメモしておきます。この記事に辿り着いているということは、Gruntそのものについては、既にご存知でしょうから、詳しくは書きません。Nodeで作られたタスクランナーです。
WebStormや、その他JetBrains製のIDEでも同様の手順で行けると思いますが、確認はしていません。
Grunt: The JavaScript Task Runner

なぜGruntなのか

過去にも書いた通り、メタ言語をコンパイルしたりするには、PhpStormのFileWatchersが便利です。
PhpStormでSass/SCSSを使う
PhpStormでCompassを使う
PhpStormでHandlebars.jsを使う

プロジェクトチームの全員がPhpStormを使っているのであれば、 watcherTasks.xmlを共有すればいいので、問題ありませんが、なかなかそうもいかないのが現実です。
チーム全員で使える資産として、 Gruntfile.jsを共有しましょう。

watcherTasksの例
watcherTasks.xml – Gist

Gruntfileの例
Gruntfile.js – Gist

環境

環境は以下の通りです。Gruntを使うには、Node.jsが必要となります。Node.jsの環境構築は、ググって調べるか、過去の記事を参考にしてみてください。
nvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作る

ソフトウェアバージョン
MacOS10.8.5
PhpStorm6.0.3
Node.js0.10.20
Gruntv0.4.1

MacにGruntをインストールする

MacにGruntをインストールしましょう。手順は以下の通りです。

PhpStormのExternal ToolsにGrunt watchを登録する

PhpStormから外部ツールを起動する為の機能「External Tools」に grunt watchを登録し、watchできるようにします。以下のキャプチャの通り、 PhpStorm > Preferences > External Toolsから、設定を行いましょう。

grunt-in-phpstorm-01
Addボタンを押して Create Toolウィンドウを立ち上げます。

grunt-in-phpstorm-02
各項目を以下の通りに変更します。

項目名
NameGrunt Watch (お好きな名前で)
DescriptionGrunt Watch (お好きな名前で)
Options任意にチェック
Programgrunt
Parameterswatch
Working directory$ProjectFileDir$

以上で設定は完了です。
これにより、PhpStormのメニューバーの Tools以下に、登録した名前(ここでは Grunt Watch)が追加されていると思います。それを押すことで、外部ツールが起動するようになります。
PhpStormを立ち上げるたびに実行する必要はありますが、Gruntでfile watchできるようになります。 Gruntfile.jsの設定に応じて、対象ファイルに変更を加え、セーブするたびに、タスクが実行されます。

この記事の為に書いたアプリケーションではありませんが、以下に実行サンプルとしても使えるアプリがありますので、トライしてみてください。
Backbone-WebSocket-Chat – GitHub

ただし、タスクを大量に走らせると、重たくなるので、 watch対象は、必要最小限のものにする等、絞り込むんでおいた方が良いと思います。PhpStormの自動保存を有効にした状態だとなおさらです。
設定例をサンプルアプリケーションから以下に抜粋します。

トラブルシューティング

以下のようなメッセージが表示され、うまく grunt watchできない場合があります。Gruntへのパスが通っていない為です。

Error running Grunt Watch:
Cannot run program “grunt” (in directory “/path/to/project”): error=2, No such file or directory

多くの場合、環境変数を引き継いでPhpStormを起動することで解決するはずです。方法は以下にまとめておりますので、参考にしてみてください。
環境変数を引き継いでPhpStormを起動する

以上です。