PyCharm 2024.1 ヘルプ

Gulp ツールウィンドウ

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

始める前に

  1. Node.js をダウンロードしてインストールします。

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

タスクを実行

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

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

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

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

  1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

    Open the Edit Configurations dialog
  2. テンプレートノードで、Gulp.js をクリックします。

  3. 開いた実行 / デバッグ構成: Gulp.js ダイアログで、Node オプションフィールドに --harmony と入力し、OK をクリックします。

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

  • Gulp ツールウィンドウで、ツールバーの the Add button をクリックして、リストから必要な Gulpfile.js ファイルを選択します。デフォルトでは、PyCharm はプロジェクトのルートに Gulpfile.js ファイルを表示します。

  • 別の Gulpfile.js ファイルがある場合は、Gulpfile.js を選択をクリックし、表示されるダイアログで必要な Gulpfile.js ファイルを選択します。PyCharm は、タイトルに選択した Gulpfile.js ファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。

ツリーを再構築する

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

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

  • ツールバーの Settings をクリックし、メニューから並べ替えを選択してから、名前を選択します。

    デフォルトでは、ツリーには、Gulpfile.js(オプション定義順序)で定義されている順序でタスクが表示されます。

タスクを実行するには

  • タスクをダブルクリックしてください。

  • ツリーでタスクを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。

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

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

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

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

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

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

ツールバー

Gulpfile を追加する

このボタンをクリックすると、別の Gulpfile.js ファイルのタスクツリーが構築されます。リストから必要な Gulpfile.js ファイルを選択します。PyCharm はタスクツリーを構築し、別のノードに表示します。

minusSign.png

Gulpfile を削除する

このボタンをクリックすると、選択したノードのタスクツリーが削除されます。

icon_reload_grunt.png

タスクの再ロード

このボタンをクリックすると、選択したノードにタスクツリーが再構築されます。Gulp.js は即座にツリーに変更を適用しないため、対応する Gulpfile.js ファイルを更新した後にツリーを再構築する必要がある場合があります。

Collapse all

すべて折りたたむ

このボタンをクリックすると、すべてのタスクツリーが非表示になり、Gulpfile.js ノードのみが表示されます。

View Modes

このボタンをクリックして、現在のビューを構成し、ツールウィンドウの表示モードを変更します。詳細については、ツールウィンドウの表示モードを参照してください。

ほとんどのメニュー項目は、オンまたはオフにできるオプションであることに注意してください。オンになっているオプションには、名前の左側にチェックマークが付いています。Gulp -specific オプションは次のとおりです。

  • Gulp 設定 : Gulp 設定ダイアログを開き、Gulp および Node インタープリターの現在の設定を更新するには、このオプションを選択します。Gulp を参照してください。

  • 並べ替え : このオプションを選択して、タスクがツリーに表示される順序を構成します。ツールバーの Settings をクリックし、メニューから並べ替えを選択してから、名前を選択します。

    デフォルトでは、ツリーには、Gulpfile.js(オプション定義順序)で定義されている順序でタスクが表示されます。

Hide

非表示

このボタンをクリックすると、ツールウィンドウが非表示になります。再度表示するには、メインメニューで表示 | ツールウィンドウ | Gulp を選択します。ツールウィンドウが再び表示され、以前に構築されたタスクのツリーがすべて表示されます。

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

Gulp 設定

このメニュー項目を選択して Gulp 設定ダイアログを開き、Node.js 構成を表示または編集します

ソースに移動

現在のツリーが構築されている Gulpfile.js ファイルを開くには、このメニュー項目を選択します。

タスクの再ロード

選択したノードにあるタスクのツリーを再構築するには、このメニュー項目を選択します。

パスをコピー

現在のツリーがクリップボードに作成された Gulpfile.js ファイルへのパスを保存するには、このメニュー項目を選択します。

Gulpfile.js を削除する

選択したノードにあるタスクのツリーを削除するには、このメニュー項目を選択します。

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

実行 <タスク名>

選択したタスクを実行するには、このメニュー項目を選択します。

デバッグ <タスク名>

選択したタスクをデバッグするには、このメニュー項目を選択します。

<タスク名> の設定を編集する

このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したタスクの事前定義された設定を編集できます。

ソースに移動

このメニュー項目を選択すると、現在のツリーが構築されている Gulpfile.js ファイルが開き、選択したタスクの定義に移動します。

関連ページ:

実行ツールウィンドウ

実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーションをデバッグする、React アプリケーションをデバッグするから詳細を学びます。ツールウィンドウのタブ:タブをピン留め複数のアプリケーションを実行している場合、各アプリケーションは、適用...

名前でターゲットを検索する (どこでも検索)

プロジェクト内またはプロジェクト外のアイテムは、その名前で見つけることができます。単一のエントリポイントから、Git 内のファイル、アクション、クラス、シンボル、設定、UI 要素などを検索できます。この機能の使用方法については、次のビデオを参照してください。プロジェクト内のテキストの検索の詳細については、「ファイル内で検索して置き換える」を参照してください。どこでも検索メインメニューで、に移動するか、を 2 回押して検索ウィンドウを開きます。デフォルトでは、PyCharm は最近使用したファイ...

ツールウィンドウの表示モード

デフォルトでは、ツールウィンドウはメインウィンドウの端にアタッチされ、常に表示されています。たとえば、特定のツールウィンドウの表示モードを変更して、アクティブな場合にのみ表示したり、ツールウィンドウバーから切り離したりできます。ツールウィンドウの表示モードを変更するメインメニューでに移動し、表示モードを選択します。あるいは、ツールウィンドウのタイトルバーでまたはをクリックし、を選択して、表示モードを選択します。次のツールウィンドウの表示モードを使用できます。ドック (ピン留め): これは、ツール...

階層ツールウィンドウ

階層ツールウィンドウを使用して、クラスの階層を分析および移動します。階層ツールウィンドウでリフレッシュアイコンをクリックすると、以前に構築した階層を更新できます。または、次の階層コマンドを実行すると結果が更新されます(に以前に構築された階層のいずれかでタブを固定していない場合)。ツールバーボタン:選択したクラスの親クラスと子クラスの両方を表示します。これには、結果のツリーで矢印が付いています。クラス階層現在のクラスの各スーパー型階層を表示します。クラス階層呼び出し階層選択したクラスを拡張するす