ツイートシェアはてブ LINE Pocket

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ツールウィンドウを開くには

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

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

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

ツリーを再構築するには

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

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

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

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

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

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

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

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

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

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

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

実行構成に従ってタスクを実行およびデバッグする

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

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

メインメニューで実行 | 構成の編集を選択します。
ツールバーのをクリックして、リストからGrunt.jsを選択します。実行/デバッグ構成：Grunt.jsダイアログが開きます。
実行構成の名前、実行するタスク（セパレータとして空白を使用する）、これらのタスクが定義されている Gruntfile.js ファイルの場所、およびグローバルにインストールされた grunt-cli パッケージへのパスを指定します。
使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはLinux用Windowsサブシステム上の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ページで必要な設定を含む設定を定義します。新しい設定を保存すると、自動的にスタートアップタスクのリストに追加されます。

WebStorm 2019.1ヘルプ