Gulp

IntelliJ IDEA は Gulp.js タスクランナー(英語)と一体化しています。 IntelliJ IDEA は、タスクの定義を認識し、タスクをツリービューで表示し、ツリー内のタスクと Gulpfile.js ファイルの定義を移動し、タスクの実行とデバッグをサポートする Gulpfile.js ファイルを解析します。

Gulp.js タスクは、専用の Gulp ツールウィンドウのタスクツリーから、または Gulpfile.js ファイルから Gulp.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 は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。

プロジェクトツールウィンドウ 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 を押すか、コンテキストメニューから <task name> の実行を選択します。

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

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

いくつかのタスクを実行する

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

タスクの定義に移動する

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

Gulpfile.js からタスクを実行する

実行するタスクの定義にキャレットを置き、コンテキストメニューから <task name> の実行を選択します。 IntelliJ IDEA は、選択したタスクの名前で一時的な実行構成を作成し、起動します。
自動的に作成された一時的な実行構成を保存するには、その構成が作成されたタスクの定義にキャレットを置き、選択内容のコンテキストメニューから <タスク名> の保存を選択します。

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

IntelliJ IDEA が自動的に作成する一時的な実行構成を使用する以外にも、独自の Gulp.js 実行構成を作成して起動することができます。

Gulp.js 実行構成を作成する

実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから Gulp.js を選択します。実行/デバッグ構成: Gulp.js ダイアログが開きます。
実行構成の名前、実行するタスク（区切り文字として空白を使用）、これらのタスクが定義されている Gulpfile.js ファイルの場所、および現在のプロジェクトルートにインストールされている gulp パッケージへのパスを指定します。
使用する Node.js ランタイムを指定します。
プロジェクトエイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページの Node runtime フィールドからプロジェクトの既定のインタープリターを自動で使用します。ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のランタイムを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、をクリックして新しいインタープリターを構成することもできます。
必要に応じて、Node.js の環境変数(英語)と、タスクを実行するための引数を指定します。 --<parameter_name> <parameter_value> （例： --env development ）の形式を使用します。詳細については Gulp 公式サイトをご覧ください。

タスクを実行する

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

タスクをデバッグする

上記のように Gulp.js 実行 / デバッグ構成を作成します。
エディターで Gulpfile.js ファイルを開き、必要に応じてファイルにブレークポイントを設定します。
デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にあるをクリックするか、メインメニューから実行 | デバッグ <remote_configuration_name> を選択します。
開いたデバッグツールウィンドウで、中断されたプログラムを調べるおよびプログラムのステップスルーに記載されているように、中断されたタスクの実行を解析したり、ステップスルーしたりします。

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

メインメニューから実行 | 実行構成の編集を選択して実行 / デバッグ構成ダイアログを開き、リストから必要な構成を選択するか、をクリックして関連する実行構成タイプを選択して新規に作成します。
開いたダイアログで、起動前エリアのをクリックし、リストから gulp タスクの実行を選択します。
表示される Gulp タスクダイアログで、必要なタスクが定義されている Gulpfile.js を指定し、実行するタスクを選択して、Gulp ツールに渡す引数を指定します。
Node.js ランタイムのロケーション、それに渡すパラメーター、 gulp パッケージへのパスを指定します。

Gulp.js タスクを自動的に実行する

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

設定ダイアログ (Ctrl+Alt+S) で、ツールのスタートアップタスクをクリックします。
開いた起動タスクページで、ツールバーのをクリックします。
リストから、必要な Gulp.js 実行構成を選択します。設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

2026 年 3 月 30 日