Gulp ツールウィンドウ

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

始める前に

Node.js をダウンロードしてインストールします。
gulp-cli パッケージ (Gulp コマンドラインインターフェース) をグローバルにインストールし、 gulp パッケージを開発依存関係としてインストールします。詳細については、 Gulp.js のインストールを参照してください。

タスクを実行

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

プロジェクトツールウィンドウ（Alt+1 ）で必要な Gulpfile.js ファイルを選択するか、エディターで開いてコンテキストメニューから Gulp タスクの表示を選択します。

デフォルトでは、IntelliJ IDEA は Gulpfile.js の ES6 を認識せず、タスクツリーの構築に失敗します。この問題を解決するには、デフォルトの Gulp.js 構成を実行を更新してください。

ES6 Gulpfile.js からタスクツリーを構築するには

実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
テンプレートノードで、 Gulp.js をクリックします。
開いた実行/デバッグ構成: Gulp.jsダイアログで、 Node オプションフィールドに --harmony と入力し、 OK をクリックします。

タスクのツリーを構築する

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 を追加する	このボタンをクリックすると、別の Gulpfile.js ファイルのタスクツリーが構築されます。リストから必要な Gulpfile.js ファイルを選択します。 IntelliJ IDEA はタスクツリーを構築し、別のノードに表示します。
	Gulpfile を削除する	このボタンをクリックすると、選択したノードのタスクツリーが削除されます。
	タスクの再ロード	このボタンをクリックすると、選択したノードにタスクツリーが再構築されます。 Gulp.js は即座にツリーに変更を適用しないため、対応する Gulpfile.js ファイルを更新した後にツリーを再構築する必要がある場合があります。
	すべて折りたたむ	このボタンをクリックすると、すべてのタスクツリーが非表示になり、 Gulpfile.js ノードのみが表示されます。
		このボタンをクリックして、現在のビューを構成し、ツールウィンドウの表示モードを変更します。詳細については、ツールウィンドウの表示モードを参照してください。ほとんどのメニュー項目は、オンまたはオフにできるオプションであることに注意してください。オンになっているオプションには、名前の左側にチェックマークが付いています。 Gulp-specific オプションは次のとおりです。 Gulp 設定このオプションを選択すると、 Gulp の設定ダイアログを開き、 Gulp と Node.js ランタイムの現在の設定を更新できます。詳しくは Gulp を参照してください。並べ替え:: このオプションを選択して、タスクがツリーに表示される順序を構成します。ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。デフォルトでは、ツリーには、 Gulpfile.js （オプション定義順序）で定義されている順序でタスクが表示されます。
	Hide	このボタンをクリックすると、ツールウィンドウが非表示になります。再度表示するには、メインメニューで表示 \| ツールウィンドウ \| Gulp を選択します。ツールウィンドウが再び表示され、以前に構築されたタスクのツリーがすべて表示されます。

ツリーのコンテキストメニュー

Gulp 設定	このメニュー項目を選択して、 Gulp 設定ダイアログを開き、 Node.js 構成を表示または編集します
ソースに移動	現在のツリーが構築されている Gulpfile.js ファイルを開くには、このメニュー項目を選択します。
タスクの再ロード	選択したノードにあるタスクのツリーを再構築するには、このメニュー項目を選択します。
パスのコピー	現在のツリーがクリップボードに作成された Gulpfile.js ファイルへのパスを保存するには、このメニュー項目を選択します。
Gulpfile.js を削除する	選択したノードにあるタスクのツリーを削除するには、このメニュー項目を選択します。

タスクのコンテキストメニュー

<task name> の実行	選択したタスクを実行するには、このメニュー項目を選択します。
デバッグ <タスク名>	選択したタスクをデバッグするには、このメニュー項目を選択します。
<タスク名> の設定を編集する	このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したタスクの事前定義された設定を編集できます。
ソースに移動	このメニュー項目を選択すると、現在のツリーが構築されている Gulpfile.js ファイルが開き、選択したタスクの定義に移動します。

2026 年 3 月 30 日