WebStorm 2018.3ヘルプ

Grunt

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

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

Gruntのインストール

WebStormプロジェクトでGruntを使用するには、2つのパッケージが必要です。

  • Gruntコマンドを実行するための、グローバルにインストールされた grunt-cli パッケージ(Gruntコマンドラインインターフェース)。

  • A grunt package installed as development dependency to build the project tasks tree and provide coding assistance while editing the Gruntfile.js or Gruntfile.coffee file. Learn more about Gruntfile.js from the Grunt(英語) official website.

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

  • 組み込みのWebStorm ターミナルAlt+F12)を開き、コマンドプロンプトで npm install -g grunt-cli と入力します。

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

  • 組み込みのWebStorm ターミナルAlt+F12)を開き、コマンドプロンプトで npm install grunt --save-dev と入力します。

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

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

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

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

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

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

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

ツリーを再構築するには

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

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

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

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

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

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

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

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

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

  • マルチセレクションモードを使用してください:隣接アイテムの Shift または隣接しないアイテムの Ctrl キーを押して、必要なタスクまたはターゲットを選択し、選択したコンテキストメニューで実行またはデバッグを選択します。

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

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

実行コンフィギュレーションに従ってタスクを実行およびデバッグする

タスクトからタスクやターゲットを実行すると、WebStormが自動的に作成する一時的実行コンフィギュレーションを使用するほか、独自のGrunt.js実行コンフィギュレーションを作成して起動できます。

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

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

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

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

  4. 使用するNode.jsインタプリタを指定します。これは、ローカルNode.jsインタプリタまたはLinux用Windowsサブシステム上のNode.jsです。

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

タスクを実行するには

  • メインツールバーのリストから新しく作成した実行コンフィギュレーションを選択し、リストの横にある icons toolwindows toolWindowRun svg をクリックします。WebStormはタスク出力を実行ツール・ウィンドウに表示します。

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

  1. Create a Grunt.js run/debug configuration as described above.

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

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

  4. 開いているデバッグツールウィンドウでは、中断されたプログラムの調査プログラムを進めるで説明されているように、中断されたタスクの実行を分析し、タスクをステップ実行します。

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

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

  2. 表示されたダイアログボックスで、起動前領域の icons general add svg をクリックし、ドロップダウンリストからGrunt タスクの実行を選択します。

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

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

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

定期的に実行するタスクやターゲットがある場合は、対応する実行コンフィギュレーションを開始タスクのリストに追加できます。タスクは、プロジェクトの起動時に自動的に実行されます。

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、ツールにある開始タスクをクリックします。

  2. 開いているスタートアップタスクページで、ツールバーの Add をクリックします。

  3. ドロップダウンリストから、必要なGrunt実行コンフィギュレーションを選択します。構成がリストに追加されます。

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

最終更新日: 2018年12月12日

関連事項