Gulp ツールウィンドウ

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

始める前に

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

タスクを実行中

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

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

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

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

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

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

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

ツリーを再構築する

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

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

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

タスクを実行するには

タスクをダブルクリックしてください。
ツリーでタスクを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。

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

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

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

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

タスクの定義に移動するには

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

ツールバー

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

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

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

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

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

2026 年 5 月 22 日