Gulp ツールウィンドウ

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

始める前

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

タスクを実行中

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

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

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

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

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

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

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

ツリーを再構築する

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

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

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

タスクを実行するには

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

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

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

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

マルチセレクトモードを使用します：隣接するアイテムの場合は Shift （for adjacent items）キーを、隣接していないアイテムの場合は Ctrl （for non-adjacent items）キーを押しながら、必要なタスクを選択し、選択した項目のコンテキストメニューから実行またはデバッグを選択します。

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

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

ツールバー

	Gulpfile を追加する	このボタンをクリックすると、別の Gulpfile.js ファイルのタスクツリーが構築されます。リストから必要な Gulpfile.js ファイルを選択します。 PyCharm はタスクツリーを構築し、別のノードに表示します。
	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 年 6 月 1 日