WebStorm 2020.1ヘルプ

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およびYarnで説明されているように、Node.jsとNPMページにパッケージをインストールすることもできます。

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

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

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

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

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

グランツツールウィンドウからタスクのツリーを構築するには

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

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

ツリーを再構築する

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

ツリー内のタスクを名前でソートするには

  • ツールバーの Settings をクリックし、メニューから次でソートを選択してから名前を選択します。
    デフォルトでは、ツリーには Gruntfile.js (オプション定義順)で定義されている順序でタスクが表示されます。

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

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

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

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

既定のタスクを実行するには

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

複数のタスクまたはターゲットを実行するには

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

タスクまたはターゲットの定義にジャンプするには

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

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

タスクまたはタスク群からターゲットを実行するときにWebStormが自動的に作成する一時的な実行構成を使用することに加えて、独自のGrunt.js実行構成を作成して起動することができます。

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

  1. メインメニューから実行 | 構成の編集を選択します。

  2. ツールバーの the Add button をクリックして、リストからGrunt.jsを選択します。実行/デバッグ構成:Grunt.jsダイアログが開きます。

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

  4. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

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

タスクを実行するには

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

タスクをデバッグするには

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

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

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

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

グランツタスクを実行前タスクとして実行するには

  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.jsページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

最終更新日: 2020年5月29日

関連ページ:

Gruntツールウィンドウ

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

npmおよびYarn

WebStormはnpm、Yarn、およびYarn 2と統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコマンドライ...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

ブレークポイント

ブレークポイントは、特定の時点でプログラムの実行を中断してその動作を調べるためのソースコードマーカーです。設定すると、ブレークポイントは明示的に削除するまでプロジェクトに残ります(一時行ブレークポイントを除く)。ブレークポイントを持つファイルが外部で変更された場合、たとえば、VCSを介して更新される...

デバッグツールウィンドウ

デバッガセッションを開始すると、WebStormはデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガアクションを実行し、プログラムデータ(フレーム、スレッド、変数など)を分析できます。コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。ツールウィン...

中断されたプログラムを調べる

After the debugger session hasstarted, theデバッグtool window will appear, and the program will run normally until abreakpointis hit or youpausethe progra...