Grunt
WebStormはGrunt JavaScript Task Runner(英語)と統合されています。WebStormは Gruntfile.js ファイルを解析し、タスクとターゲットの定義を認識し、ツリービューでタスクやターゲットを表示し、ツリー内のタスクまたはターゲットとその定義を Gruntfile.js ファイル内でナビゲートし、タスクとターゲットの実行とデバッグをサポートします。
WebStormでは、専用グランツツールウィンドウのタスクツリーから、またはGrunt実行構成を使用して、または起動前タスクとして、Gruntタスクを実行できます。WebStormは、実行ツール・ウィンドウでタスクを実行した結果を示します。ツールウィンドウにはGruntの出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。
Gruntのインストール
WebStormプロジェクトでGruntを使用するには、2つのパッケージが必要です。
Gruntコマンドを実行するための、グローバルにインストールされた
grunt-cliパッケージ（Gruntコマンドラインインターフェース）。プロジェクトタスクツリーを構築し、
Gruntfile.jsまたはGruntfile.coffeeファイルの編集中にコーディング支援を提供するために、開発依存関係としてインストールされたgruntパッケージ。Gruntfile.jsの詳細については、Grunt(英語)の公式Webサイトをご覧ください。
grunt-cliをグローバルにインストールするには
組み込みのWebStorm ターミナル（Alt+F12）を開き、コマンドプロンプトで
npm install -g grunt-cliと入力します。
プロジェクトにGruntをインストールするには
組み込みのWebStorm ターミナル（Alt+F12）を開き、コマンドプロンプトで
npm install grunt --save-devと入力します。
タスクツリーからGruntタスクを実行する
WebStormを使用すると、GruntツールウィンドウのタスクツリーからGruntタスクを簡単かつ迅速に実行できます。WebStormは一時的な実行構成を自動的に作成し、必要に応じて後で保存して使用することができます。
Gruntツールウィンドウを開くには
プロジェクトツールウィンドウで必要な
Gruntfile.jsファイルを選択するか、エディターで開き、コンテキストメニューでGrunt タスクの表示を選択します。
グランツツールウィンドウからタスクのツリーを構築するには
Gruntツールウィンドウで、ツールバーの
をクリックし、リストから必要な Gruntfile.jsファイルを選択します。デフォルトでは、WebStormはプロジェクトのルートにGruntfile.jsファイルを表示します。別の
Gruntfile.jsファイルがある場合は、Gruntfile.jsを選択をクリックし、表示されるダイアログで必要なGruntfile.jsファイルを選択します。WebStormは、タイトルに選択したGruntfile.jsファイルへのパスを含む新しいノードを追加し、新しいノードにタスクツリーを構築します。
ツリーを再構築するには
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のタスクを名前でソートするには
ツールバーの
をクリックし、メニューで次でソートを選択し、名前を選択します。
デフォルトでは、Gruntfile.js（オプション定義順）で定義されている順序でタスクが表示されます。
タスクまたはターゲットを実行するには
タスクまたはターゲットをダブルクリックします。
ツリーでタスクまたはターゲットを選択し、 Enter を押すか、コンテキストメニューで実行<タスク名>を選択します。
既定のタスクを実行するには
ツリー内のルートノードを選択し、選択範囲のコンテキストメニューでデフォルトを実行を選択します。
複数のタスクまたはターゲットを実行するには
マルチセレクションモードを使用してください：隣接アイテムの Shift または隣接しないアイテムの Ctrl キーを押して、必要なタスクまたはターゲットを選択し、選択したコンテキストメニューで実行またはデバッグを選択します。
タスクまたはターゲットの定義にジャンプするには
ツリーで必要なタスクまたはターゲットを選択し、選択したコンテキストメニューでソースに移動を選択します。
実行構成に従ってタスクを実行およびデバッグする
タスクトからタスクやターゲットを実行すると、WebStormが自動的に作成する一時的実行構成を使用するほか、独自のGrunt.js実行構成を作成して起動できます。
Grunt.jsの実行/デバッグ設定を作成するには
メインメニューでを選択します。
ツールバーの
をクリックし、ポップアップリストからGrunt.jsを選択します。実行/デバッグ構成：Grunt.jsダイアログが開きます。実行構成の名前、実行するタスク（セパレータとして空白を使用する）、これらのタスクが定義されている
Gruntfile.jsファイルの場所、およびグローバルにインストールされたgrunt-cliパッケージへのパスを指定します。- 使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはLinux用Windowsサブシステム上のNode.jsです。
オプションで、Node.jsに渡すNode.js固有のオプションパラメータと環境変数(英語)を指定します。
タスクを実行するには
メインツールバーのリストから新しく作成した実行構成を選択し、リストの横にある
をクリックします。WebStormはタスク出力を実行ツール・ウィンドウに表示します。
タスクをデバッグするには
上記のように、Grunt.jsの実行/デバッグ構成を作成します。
エディターで
Gruntfile.jsファイルを開き、必要に応じてブレークポイントを設定します。デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ設定を選択し、リストの横にある
をクリックするか、を選択します。開いているデバッグツールウィンドウでは、中断されたプログラムの調査とプログラムを進めるで説明されているように、中断されたタスクの実行を分析し、タスクをステップ実行します。
グランツタスクを実行前タスクとして実行するには
メインメニューでを選択して実行/デバッグ構成ダイアログダイアログを開き、リストから必要な設定を選択するか、
をクリックして関連する実行構成タイプを選択して新たに作成します。表示されたダイアログボックスで、起動前領域の
をクリックし、ドロップダウンリストからGrunt タスクの実行を選択します。- 開くGrunt タスクダイアログボックスで、必要なタスクが定義されている
Gruntfile.jsを指定し、実行するタスクを選択し、Gruntツールに渡す引数を指定します。Node.jsインタープリターの場所、渡すパラメータ、
grunt-cliパッケージへのパスを指定します。
自動的にGruntタスクを実行する
定期的に実行するタスクやターゲットがある場合は、対応する実行構成を開始タスクのリストに追加できます。タスクは、プロジェクトの起動時に自動的に実行されます。
設定/環境設定ダイアログ（Ctrl+Alt+S）で、ツールにある開始タスクをクリックします。
開いているスタートアップタスクページで、ツールバーの
をクリックします。- ドロップダウンリストから、必要なGrunt実行構成を選択します。構成がリストに追加されます。
適用可能な構成がプロジェクトで利用できない場合は、
をクリックして構成の編集を選択します。次に、開く実行/デバッグ構成：Grunt.jsページで必要な設定を含む設定を定義します。新しい設定を保存すると、自動的にスタートアップタスクのリストに追加されます。