[JavaScript] IntelliJ IDEAでGruntのタスクをしたい

2013/06/24

こんにちは。きんくまです。

今回はIntelliJ IDEAの設定についてです。

TypeScriptを書いていて、型づけ言語だったらやっぱりサクサクコード補完して欲しいよなーと思ってきました。それで、なんでもIntelliJ IDEAというエディタだとそれができるらしいので、ひとまず評価版をダウンロードしてきた次第です。

IntelliJ IDEAはJetBrainsという会社が出しているエディタの最上位版でとにかくいろいろな言語が書けるらしいです。個人的には以前にiOS開発用に同社のApp Codeを買ったことがあります。でも、modern Objective-Cが出てきてからXcodeでこと足りるようになってしまい、出番がなくなってしまい、、。

えーとApp Codeのことは置いておいてIDEAです。
とにかく感想は使ってみないとなんともいえないので、まずはGruntのタスクがエディタ内で走ってくれた方が嬉しいのです。

で、その設定方法について調べてみました。
Grunt自体はすでに動かせる状態と仮定します。

NodeJSプラグインを入れる

メニュー > Preferences > Plugins > NodeJSをチェックします。

でも自分の場合はチェックしようにもチェックできなかったので、下のInstall JetBrains plugin…ボタンを押してNodeJSプラグインをインストールしてからやりました。

詳しくはヘルプを見るとよいです。

>> Running and Debugging Node.Js

これで、エディタ内でNodeのアプリが走るようになりました。

Run & Debug設定でGruntの設定をする

Gruntのタスクをさてどうしたものかとググったところ、こちらのページのDaveさんとJeremyさんのコメントでできるという情報を入手しました。

>> IntelliJ 12 Review

何度かトライ＆エラーを繰り返して挙動を調べたところ、こんな感じにしたらできました。

メニュー > Run > Edit Configurations

簡単にいうと、1つのタスクごとにRun設定を増やしていく感じです。

1. 左上の+ボタンからNode.jsを選択

2. 設定項目
Path to Node:

/usr/local/bin/gruntというエイリアスをダイアログで選択したら自分の環境の場合は、もとのファイルが

/usr/local/lib/node_modules/grunt-cli/bin/grunt

となっていました。

Node Parameters:

Gruntのタスク名です。connect:serverとか、sassとかtypescriptとかです。
自分の場合は、開発用（dev）にソースマップつき、リリース用にソースマップなしにして圧縮とかやってるので、それをGruntfile.jsに書いて、sass:dev、sass:releaseとかしています。

Working Directory:

動かしたい設定ファイルのGruntfile.jsの置いてあるフォルダへのパスです。

Path to Node App JS File:

Gruntfile.jsとする必要があります

Application Parameters:

–forceとする必要があります。これがないとうまく走らなかったです。

設定後にRunする

さて好きなタスクをそれぞれ設定したら走らせます

緑の三角ボタンを押してもよいし、キーボードショートカットから実行してもよいでしょう。
メニューだとRun > Runとなります。
そうすると、コンソールが表示されてきちんと走ったことが確認できます。
さきほどの設定で–forceがないと、Warning: Task “Gruntfile.js” not found.のところで止まってしまいます。

やったー！動いたよ。