WebStorm 2025.1 ヘルプ

Grunt

WebStorm は Grunt JavaScript Task Runner(英語) と一体化しています。WebStorm は、タスクとターゲットの定義を認識し、ツリービューでタスクやターゲットを表示し、Gruntfile.js ファイル内のタスクまたはターゲットと、タスクとターゲットの実行とデバッグをサポートする Gruntfile.js ファイルを解析します。

WebStorm では、専用の Grunt ツールウィンドウのタスクツリーから、または Grunt 実行構成を使用して、または起動前のタスクとして、Grunt タスクを実行できます。WebStorm は実行ツールウィンドウでタスクを実行した結果を示します。ツールウィンドウには Grunt の出力が表示され、エラーが発生したことが表示され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

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

タスクツリーから Grunt タスクを実行する

WebStorm を使用すると、Grunt ツールウィンドウのタスクツリーから Grunt タスクを簡単かつ迅速に実行できます。WebStorm は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。

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

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

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

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

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

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

ツリーを再構築する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実行構成に応じたタスクの実行とデバッグ

タスクを実行するときに WebStorm が自動的に作成する一時的な実行構成を使用する以外に、独自の Grunt.js 実行構成を作成して起動できます。

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

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

    Open the Edit Configurations dialog

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

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

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

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

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

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

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

タスクを実行する

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

タスクをデバッグする

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

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

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

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

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

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

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

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

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

Grunt タスクを自動的に実行する

定期的に実行するタスクまたはターゲットがある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。

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

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

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

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

関連ページ:

Grunt ツールウィンドウ

このツールウィンドウを使用して Grunt タスクを実行します。タスクの実行結果が実行ツールウィンドウに表示されます。ツールウィンドウには、Grunt の出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。始める前に:Node.js をダウンロードしてインストールします。grunt-cli パッケージ (Grunt コマンドラインインターフェース) をグローバルにインスト...

実行ツールウィンドウ

実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。アプリケーションがの開発モードで実行されている場合は、実行ツールウィンドウから直接デバッグを開始できます。を押したまま、アプリケーションが実行されている URL をクリックするだけです。Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーショ...

リモート Node.js インタープリターの構成

WebStorm では、リモートホストまたは仮想環境にインストールされた Node.js でアプリケーションを開発、テスト、リント、実行、デバッグするときに、リモート Node.js インタープリターを構成する必要があります。リモート Node.js インタープリターは、Node.js リモートインタープリターの構成ダイアログで構成されます。このダイアログは、リモート環境でアプリケーションを実行またはデバッグするための Node.js 実行 / デバッグ構成を作成または編集するときに、設定ダイア...

Node.js

Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。WebStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...

実行 / デバッグ構成: Node.js

作成: 次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「Node.js の実行とデバッグ」を参照してください。このダイアロ...

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類:WebSto