Gulp
IntelliJ IDEA は Gulp.js タスクランナー(英語)と一体化しています。IntelliJ IDEA は、タスクの定義を認識し、タスクをツリービューで表示し、ツリー内のタスクと Gulpfile.js ファイルの定義を移動し、タスクの実行とデバッグをサポートする Gulpfile.js ファイルを解析します。
Gulp.js タスクは、専用の Gulp ツールウィンドウのタスクツリーから、または Gulp.js の実行構成を起動して Gulpfile.js ファイルから、または別の実行構成からの起動前タスクとして実行できます。IntelliJ IDEA は、実行ツールウィンドウでタスクを実行した結果を示します。ツールウィンドウには Grunt 出力が表示され、発生したエラーが報告され、見つからなかったパッケージまたはプラグインが一覧表示されます。ツールウィンドウのタイトルバーには、最後に実行されたタスクの名前が表示されます。
始める前に
Node.js をダウンロードしてインストールします。
Gulp.js のインストール
IntelliJ IDEA プロジェクトで Gulp を使用するには、次の 2 つのパッケージが必要です。
Gulp コマンドを実行するためにグローバルにインストールされた gulp-cli パッケージ（Gulp コマンドラインインターフェース）。
プロジェクトのタスクツリーを構築し、Gulpfile.js ファイルの編集中にコーディング支援を提供する開発依存関係としてインストールされた gulp パッケージ。Gulp.js 公式サイト(英語)から Gulpfile.js の詳細を学びましょう。
gulp-cli をグローバルにインストールする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install -global gulp-cli
プロジェクトに Gulp.js をインストールする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install gulp --save-dev
タスクツリーから Gulp.js タスクを実行する
IntelliJ IDEA を使用すると、Gulp ツールウィンドウのタスクツリーから Gulp.js タスクを簡単かつ迅速に実行できます。IntelliJ IDEA は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。
Gulp.js は、プロジェクトツールウィンドウ Alt+1 内の Gulpfile.js またはエディターで開いた Gulpfile.js のコンテキストメニューで Gulp タスクの表示を選択して Gulp.js を呼び出すとすぐにタスクツリーの構築を開始します。ツリーは、Gulp.js が呼び出された Gulpfile.js ファイルに従って構築されます。プロジェクトに複数の Gulpfile.js ファイルがある場合は、それぞれに個別のタスクツリーを構築し、以前に構築されたタスクツリーを破棄せずにタスクを実行できます。各ツリーは個別のノードに表示されます。
技術的には、IntelliJ IDEA は Gulp.js を呼び出し、デフォルトの Gulp.js 構成を実行に従って Gulpfile.js を処理します。これは静かに行われ、あなたからのステップを必要としません。
Gulp ツールウィンドウを開く
現在の IntelliJ IDEA セッション中に初めてタスクツリーを構築すると、Gulp ツールウィンドウはまだ開かれていません。
プロジェクトツールウィンドウ Alt+1 で必要な Gulpfile.js ファイルを選択するか、エディターで開いてコンテキストメニューから Gulp タスクの表示を選択します。
デフォルトでは、IntelliJ IDEA は Gulpfile.js の ES6 を認識せず、タスクツリーの構築に失敗します。この問題を解決するには、デフォルトの Gulp.js 構成を実行を更新してください。
ES6 Gulpfile.js からタスクツリーを構築する
に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
テンプレートノードで、Gulp.js をクリックします。
開いた実行 / デバッグ構成: Gulp.js ダイアログで、Node オプションフィールドに
--harmonyと入力し、OK をクリックします。
Gulp ツールウィンドウからタスクのツリーを構築する
Gulp ツールウィンドウで、ツールバーの
をクリックして、リストから必要な Gulpfile.js ファイルを選択します。デフォルトでは、IntelliJ IDEA はプロジェクトのルートに Gulpfile.js ファイルを表示します。別の Gulpfile.js ファイルがある場合は、Gulpfile.js を選択をクリックし、表示されるダイアログで必要な Gulpfile.js ファイルを選択します。IntelliJ IDEA は、タイトルに選択した Gulpfile.js ファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のタスクを名前で並べ替える
ツールバーの
をクリックし、メニューから並べ替えを選択してから、名前を選択します。デフォルトでは、ツリーには、Gulpfile.js（オプション定義順序）で定義されている順序でタスクが表示されます。
タスクの実行
タスクをダブルクリックしてください。
ツリーでタスクを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。
デフォルトのタスクを実行する
ツリーのルートノードを選択して、コンテキストメニューからデフォルトを実行を選択します。
いくつかのタスクを実行する
複数選択モードを使用します。Shift （隣接明細の場合）または Ctrl （隣接しない明細の場合）キーを押しながら必要なタスクを選択し、選択のコンテキストメニューから実行またはデバッグを選択します。
タスクの定義に移動する
ツリーで必要なタスクを選択して、選択のコンテキストメニューからソースに移動を選択します。
Gulpfile.js からタスクを実行する
実行するタスクの定義にキャレットを置き、コンテキストメニューから実行 <タスク名> を選択します。IntelliJ IDEA は、選択したタスクの名前で一時的な実行構成を作成し、起動します。
自動的に作成された一時的な実行構成を保存するには、その構成が作成されたタスクの定義にキャレットを置き、選択内容のコンテキストメニューから <タスク名> の保存を選択します。
実行構成に応じたタスクの実行とデバッグ
IntelliJ IDEA が自動的に作成する一時的な実行構成を使用する以外にも、独自の Gulp.js 実行構成を作成して起動することができます。
Gulp.js 実行構成を作成する
に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから Gulp.js を選択します。実行 / デバッグ構成: Gulp.js ダイアログが開きます。実行構成の名前、実行するタスク（区切り文字として空白を使用）、これらのタスクが定義されている Gulpfile.js ファイルの場所、および現在のプロジェクトルートにインストールされている gulp パッケージへのパスを指定します。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、IntelliJ IDEA は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。必要に応じて、Node.js の環境変数(英語)と、タスクを実行するための引数を指定します。
--<parameter_name> <parameter_value>の形式を使用します。例:--env developmentGulp オフィシャル Web サイト(英語)から詳細を参照してください。
タスクを実行する
ツールバーの実行 / デバッグ構成ウィジェットリストから、新しく作成された 構成を選択し、その横にある
をクリックします。出力は実行ツールウィンドウに表示されます。
タスクをデバッグする
上記のように Gulp.js 実行 / デバッグ構成を作成します。
エディターで Gulpfile.js ファイルを開き、必要に応じてファイルにブレークポイントを設定します。
デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある
をクリックするか、メインメニューから を選択します。開いたデバッグツールウィンドウで、中断されたプログラムを調べるとプログラムのステップスルーに従って、中断されたタスクの実行を分析し、タスクをステップスルーするなどします。
Gulp タスクを起動前タスクとして実行する
メインメニューからを選択して実行 / デバッグ構成ダイアログを開き、リストから必要な構成を選択するか、
をクリックして関連する実行構成タイプを選択して新規に作成します。開いたダイアログで、起動前エリアの
をクリックし、リストから gulp タスクの実行を選択します。表示される Gulp タスクダイアログで、必要なタスクが定義されている Gulpfile.js を指定し、実行するタスクを選択して、Gulp ツールに渡す引数を指定します。
Node.js インタープリターの場所、それに渡すパラメーター、gulp パッケージへのパスを指定します。
Gulp.js タスクを自動的に実行する
定期的に実行するタスクがいくつかある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。
設定ダイアログ (Ctrl+Alt+S) で、ツールのスタートアップタスクをクリックします。
開いた起動タスクページで、ツールバーの
をクリックします。リストから、必要な Gulp.js 実行構成を選択します。設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、
をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。
関連ページ：
Gulp ツールウィンドウ
このツールウィンドウを使用して Gulp.js のタスクを実行します。タスクの実行結果が実行ツールウィンドウに表示されます。ツールウィンドウには Gulp.js の出力が表示され、発生したエラーが報告され、見つからなかったパッケージまたはプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。始める前に：Node.js をダウンロードしてインストールします。gulp-cli パッケージ (Gulp コマンドラインインターフェース) をグローバルにイン...
実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。ツールウィンドウのタブ：タブをピン留め複数のアプリケーションを実行している場合、各アプリケーションは、適用された実行 / デバッグ構成にちなんで名付けられたタブに表示されます。アプリケーションを再実行しても出力を保持するには、出力タブを固定します。タブを右クリックし、タブをピン留めを選択します。デフォル...
ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類：Intell
デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが開きます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ (フレーム、スレッド、変数など) を表示および分析し、デバッガーアクションを実行します。デフォルトでは、プログラムがブレークポイントに到達したときにデバッグツールウィンドウが開き、セッションが終了しても非表示になりません。この動作を変更するには、ビルド、実行、デプロイ | デバッガー設定ページに移動し、ブレークポイントでデバッグウィンドウを表示するチェ...
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる：プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティ
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。デバッグセッションを開始し、プログラムを一時停止すると、IntelliJ IDEA は一連のステップアクションを提供します。ステップアクションの選択は、次の行に直接移動する必要があるか、中間のメソッド呼び出しもインスペクションする必要があるかなど、戦略によって異なります。ステップボタンは、デバッグツールウィンドウのツールバーにあります。ステップオーバー：現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれて...