Grunt

grunt-cli をグローバルにインストールする

• 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

  npm install -g grunt-cli

プロジェクトに Grunt をインストールする

• 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

  npm install grunt --save-dev

Grunt ツールウィンドウを開く

WebStorm セッション中に初めてタスクツリーを構築すると、Grunt ツールウィンドウはまだ開かれていません。

• プロジェクトツールウィンドウ Alt+1 で必要な Gruntfile.js ファイルを選択するか、エディターで開いてコンテキストメニューから Grunt タスクの表示を選択します。

Grunt ツールウィンドウからタスクのツリーを構築する

1. Grunt ツールウィンドウで、ツールバーの をクリックして、リストから必要な Gruntfile.js ファイルを選択します。デフォルトでは、WebStorm はプロジェクトのルートに Gruntfile.js ファイルを表示します。

2. 別の Gruntfile.js ファイルがある場合は、Gruntfile.js を選択をクリックし、表示されるダイアログで必要な Gruntfile.js ファイルを選択します。WebStorm は、タイトルに選択した Gruntfile.js ファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。

ツリーを再構築する

• 必要なノードに切り替えて、ツールバーの をクリックします。

ツリー内のタスクを名前で並べ替える

• ツールバーの をクリックし、メニューから並べ替えを選択してから、名前を選択します。

  デフォルトでは、ツリーには、Gruntfile.js（オプション定義順序）で定義されている順序でタスクが表示されます。

タスクまたはターゲットを実行する

• タスクまたはターゲットをダブルクリックします。

• ツリーでタスクまたはターゲットを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。

タスクツリーからタスクを実行する場合、強制実行と詳細モードのオプションは使用できないことに注意してください。その結果、たとえば、警告を無視したり、詳細なログを提供したりするように WebStorm を構成することはできません。これらのオプションを使用するには、以下の実行構成に応じたタスクの実行とデバッグに従って、実行構成からタスクまたはターゲットを実行します。

デフォルトのタスクを実行する

• ツリーのルートノードを選択し、選択したコンテキストメニューからデフォルトを実行を選択します。

いくつかのタスクまたはターゲットを実行する

• 複数選択モードを使用します。Shift （隣接するアイテムの場合）または Ctrl （隣接しないアイテムの場合）キーを押しながら必要なタスクまたはターゲットを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。

タスクまたはターゲットの定義に移動する

• ツリーで必要なタスクまたはターゲットを選択して、選択のコンテキストメニューからソースに移動を選択します。

Grunt.js の実行 / デバッグ構成を作成する

1. 実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。

   

   開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから Grunt.js を選択します。実行 / デバッグ構成: Grunt.js ダイアログが開きます。

2. 実行構成の名前、実行するタスク（区切り文字として空白スペースを使用）、これらのタスクが定義されている Gruntfile.js ファイルの場所、およびグローバルにインストールされた grunt-cli パッケージへのパスを指定します。

3. 使用する Node.js インタープリターを指定します。

   プロジェクトエイリアスを選択すると、WebStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、WebStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

   別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 をクリックして新しいインタープリターを構成することもできます。

   詳細については、「リモート Node.js インタープリターの構成」、「ローカル Node.js インタープリターの構成」、「Linux の Windows サブシステムで Node.js を使用する」を参照してください。

   必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと環境変数(英語)を指定します。

タスクを実行する

• ツールバーの実行 / デバッグ構成ウィジェットリストから、新しく作成された 構成を選択し、その横にある をクリックします。WebStorm は実行ツールウィンドウにタスク出力を表示します。

タスクをデバッグする

1. 上記のように Grunt.js 実行 / デバッグ構成を作成します。

2. エディターで Gruntfile.js ファイルを開き、必要に応じてファイルにブレークポイントを設定します。

3. デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある をクリックするか、メインメニューから実行 | デバッグ <構成名> を選択します。

4. 開いたデバッグツールウィンドウで、中断されたプログラムを調べるとプログラムのステップスルーに従って、中断されたタスクの実行を分析し、タスクをステップスルーするなどします。

Grunt タスクを起動前タスクとして実行する

1. メインメニューから実行 | 実行構成の編集を選択して実行 / デバッグ構成ダイアログダイアログを開き、リストから必要な構成を選択するか、 をクリックして関連する実行構成タイプを選択して、新規に作成します。

2. 開いたダイアログで、起動前エリアの をクリックし、リストから Grunt タスクの実行を選択します。

3. 表示される Grunt タスクダイアログで、必要なタスクが定義されている Gruntfile.js を指定し、実行するタスクを選択して、Grunt ツールに渡す引数を指定します。

   Node.js インタープリターの場所、渡すパラメーター、grunt-cli パッケージへのパスを指定します。

1. 設定ダイアログ（Ctrl+Alt+S）で、ツール | スタートアップタスクに移動します。

2. 開いた起動タスクページで、ツールバーの をクリックします。

3. リストから、必要な Grunt 実行構成を選択します。設定がリストに追加されます。

   プロジェクトに適用可能な構成がない場合は、 をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。