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 パッケージ。Grunt オフィシャル Web サイト(英語)から Gruntfile.js の詳細を学びましょう。
grunt-cli をグローバルにインストールするには
埋め込みターミナル（Alt+F12）に次のように入力します。
npm install -g grunt-cli
プロジェクトに Grunt をインストールするには
埋め込みターミナル（Alt+F12）に次のように入力します。
npm install grunt --save-dev
npm、pnpm、Yarn の説明に従って、パッケージを Node.js と NPM ページにインストールすることもできます。
タスクツリーから Grunt タスクを実行する
WebStorm を使用すると、Grunt ツールウィンドウのタスクツリーから Grunt タスクを簡単かつ迅速に実行できます。WebStorm は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。
Grunt ツールウィンドウを開くには
WebStorm セッション中に初めてタスクツリーを構築すると、Grunt ツールウィンドウはまだ開かれていません。
プロジェクトツールウィンドウで必要な Gruntfile.js ファイルを選択するか、エディターで開き、コンテキストメニューから Grunt タスクの表示を選択します。
グランツツールウィンドウからタスクのツリーを構築するには
Grunt ツールウィンドウで、ツールバーの
をクリックして、リストから必要な Gruntfile.js ファイルを選択します。デフォルトでは、WebStorm はプロジェクトのルートに Gruntfile.js ファイルを表示します。別の Gruntfile.js ファイルがある場合は、Gruntfile.js を選択をクリックし、表示されるダイアログで必要な Gruntfile.js ファイルを選択します。WebStorm は、タイトルに選択した Gruntfile.js ファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のタスクを名前でソートするには
ツールバーの
をクリックし、メニューから並べ替えを選択してから、名前を選択します。
デフォルトでは、ツリーには、Gruntfile.js（オプション定義順）で定義された順序でタスクが表示されます。
タスクまたはターゲットを実行するには
タスクまたはターゲットをダブルクリックします。
ツリーでタスクまたはターゲットを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。
タスクツリーからタスクを実行する場合、強制実行と詳細モードのオプションは使用できないことに注意してください。その結果、たとえば、警告を無視したり、詳細なログを提供したりするように WebStorm を構成することはできません。これらのオプションを使用するには、以下の実行構成に応じたタスクの実行とデバッグに従って、実行構成からタスクまたはターゲットを実行します。
既定のタスクを実行するには
ツリーのルートノードを選択し、選択したコンテキストメニューからデフォルトを実行を選択します。
複数のタスクまたはターゲットを実行するには
複数選択モードを使用します。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 の出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。始める前に ：Node.js をダウンロードしてインストールします。grunt-cli パッケージ（Grunt コマンドラインインターフェース）をグローバルにインストール...
実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションで生成された出力が表示されます。複数のアプリケーションを実行している場合は、それぞれが実行 / デバッグ構成が適用された後に名前が付けられたタブに表示されます。アプリケーションを re-run すると、新しい出力によってタブの内容が上書きされます。アプリケーションの出力を保持するには、アプリケーションを再実行しても、出力タブを固定します。アプリケーションがの開発モードで実行されている場合は、実行ツールウィンドウから直接デバッグを開始できます。を押したまま、...
npm、pnpm、Yarn
WebStorm は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析し、スクリプト...
Node.js
Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。WebStorm は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインス...
ブレークポイント
ブレークポイントは、特定の時点でプログラムの実行を中断してその動作を調べるためのソースコードマーカーです。一度設定すると、ブレークポイントは明示的に削除するまでプロジェクトに残ります（一時的な行ブレークポイントを除く）。ブレークポイントを持つファイルが外部で変更された場合、たとえば、VCS を介して更新されるか、外部エディターで変更され、行番号が変更された場合、ブレークポイントはそれに応じて移動します。このような変更が行われた場合は、WebStorm が実行されている必要があります。実行されてい...
デバッグツールウィンドウ
デバッガーセッションを開始すると、WebStorm はデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガーアクションを実行し、プログラムデータ（フレーム、スレッド、変数など）を分析できます。コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。ツールウィンドウを使用する一般的な手順については、ツールウィンドウを参照してください。デフォルトでは、デバッグツールウィンドウは、プログラムがブレークポイントに達したときにのみ表示され、デバッグセッションが...