Grunt
WebStormはGrunt JavaScript Task Runner(英語)と一体化しています。WebStormは、タスクとターゲットの定義を認識し、ツリービューでタスクやターゲットを表示し、Gruntfile.js ファイル内のタスクまたはターゲットと、タスクとターゲットの実行とデバッグをサポートする Gruntfile.js ファイルを解析します。
WebStormでは、専用のGruntツールウィンドウのタスクツリーから、またはGrunt実行構成を使用して、または起動前のタスクとして、Gruntタスクを実行できます。WebStormは実行ツール・ウィンドウでタスクを実行した結果を示します。ツールウィンドウにはGruntの出力が表示され、エラーが発生したことが表示され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。
Gruntのインストール
WebStormプロジェクトでGruntを使用するには、2つのパッケージが必要です。
Gruntコマンドを実行するための、グローバルにインストールされたgrunt-cliパッケージ（Gruntコマンドラインインターフェース）。
Gruntfile.js または Gruntfile.coffee ファイルの編集中にプロジェクトタスクツリーを構築し、コーディング支援を提供するための開発依存関係としてインストールされたgruntパッケージ。 Gruntfile.js の詳細については、Grunt(英語)の公式Webサイトを参照してください。
grunt-cliをグローバルにインストールするには
埋め込みターミナル（Alt+F12）に次のように入力します。
npm install -g grunt-cli
プロジェクトにGruntをインストールするには
埋め込みターミナル（Alt+F12）に次のように入力します。
npm install grunt --save-dev
タスクツリーからGruntタスクを実行する
WebStormを使用すると、GruntツールウィンドウのタスクツリーからGruntタスクを簡単かつ迅速に実行できます。WebStormは自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。
Gruntツールウィンドウを開くには
プロジェクトツールウィンドウで必要なファイルを選択するか、エディターでそれを開き、コンテキストメニューからGrunt タスクの表示を選択します。
グランツツールウィンドウからタスクのツリーを構築するには
Gruntツールウィンドウで、ツールバーの
をクリックして、リストから必要なファイルを選択します。デフォルトでは、WebStormはプロジェクトのルートにファイルを表示します。別のファイルがある場合は、Gruntfile.jsを選択をクリックして表示されるダイアログで必要なファイルを選択します。WebStormは、タイトルに選択したファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のタスクを名前でソートするには
ツールバーの
をクリックし、メニューから次でソートを選択してから名前を選択します。
デフォルトでは、ツリーには Gruntfile.js （オプション定義順）で定義されている順序でタスクが表示されます。
タスクまたはターゲットを実行するには
タスクまたはターゲットをダブルクリックします。
ツリーでタスクまたはターゲットを選択して Enter を押すか、コンテキストメニューから実行<タスク名>を選択します。
既定のタスクを実行するには
ツリーのルートノードを選択し、選択したコンテキストメニューからデフォルトを実行を選択します。
複数のタスクまたはターゲットを実行するには
複数選択モードを使用します。Shift （隣接するアイテムの場合）または Ctrl （隣接しないアイテムの場合）キーを押しながら必要なタスクまたはターゲットを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。
タスクまたはターゲットの定義にジャンプするには
ツリーで必要なタスクまたはターゲットを選択し、選択したコンテキストメニューでソースに移動を選択します。
実行構成に従ってタスクを実行およびデバッグする
タスクまたはタスク群からターゲットを実行するときにWebStormが自動的に作成する一時的な実行設定を使用することに加えて、独自のGrunt.js実行設定を作成して起動することができます。
Grunt.jsの実行/デバッグ設定を作成するには
メインメニューでを選択します。
ツールバーの
をクリックして、リストからGrunt.jsを選択します。実行/デバッグ構成：Grunt.jsダイアログが開きます。実行構成の名前、実行するタスク（区切り文字として空白を使用）、これらのタスクが定義されている Gruntfile.js ファイルの場所、およびグローバルにインストールされたgrunt-cliパッケージへのパスを指定します。
- 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for Linuxの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ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。
関連事項
関連ページ：
Gruntツールウィンドウ
このツールウィンドウを使用してGrunt タスクを実行します。タスクの実行結果が実行ツール・ウィンドウに表示されます。ツールウィンドウには、Gruntの出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィン...
npmおよびYarn
WebStormはnpmおよびYarnパッケージマネージャーと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、削除することができます。Node.jsとNPMページはパッケージを管理するための専用のUIを提供します。もちろん、内蔵のターミナルのコマン...
Node.js
Node.jsはサーバーサイドでJavaScriptを実行するための軽量のランタイム環境です。WebStormはNode.jsと統合して、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、および保守を支援します。npmパッケージを管理するため、またはJavaScript lin...
中断されたプログラムの調査
実行がブレークポイントに到達したとき、またはプログラムを手動で中断したときは、フレームを分析してアプリケーションを調べることができます。フレームはアクティブなメソッドまたは関数呼び出しに対応します。フレームには、呼び出されたメソッドまたは関数のローカル変数、その引数、および式評価を可能にするコードコ...
実行/デバッグ構成ダイアログ
このダイアログボックスを使用して、実行/デバッグ構成を作成、編集、調整、または削除し、新しく作成されたすべての実行/デバッグ設定に適用されるデフォルトのテンプレートを設定します。プロジェクト構成は、構成タイプごとにグループ化されています。既定の構成テンプレートは、ダイアログボックスの左側にあるテンプ...