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 をクリックします。
開いた実行 / デバッグ構成: Gulp.js ダイアログで、Node オプションフィールドに
--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 設定ダイアログを開き、Node.js 構成を表示または編集します |
ソースに移動 | 現在のツリーが構築されている Gulpfile.js ファイルを開くには、このメニュー項目を選択します。 |
タスクの再ロード | 選択したノードにあるタスクのツリーを再構築するには、このメニュー項目を選択します。 |
パスをコピー | 現在のツリーがクリップボードに作成された Gulpfile.js ファイルへのパスを保存するには、このメニュー項目を選択します。 |
Gulpfile.js を削除する | 選択したノードにあるタスクのツリーを削除するには、このメニュー項目を選択します。 |
タスクのコンテキストメニュー
実行 <タスク名> | 選択したタスクを実行するには、このメニュー項目を選択します。 |
デバッグ <タスク名> | 選択したタスクをデバッグするには、このメニュー項目を選択します。 |
<タスク名> の設定を編集する | このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したタスクの事前定義された設定を編集できます。 |
ソースに移動 | このメニュー項目を選択すると、現在のツリーが構築されている Gulpfile.js ファイルが開き、選択したタスクの定義に移動します。 |
関連ページ:
実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーションをデバッグする、React アプリケーションをデバッグするから詳細を学びます。ツールウィンドウのタブ:タブをピン留め複数のアプリケーションを実行している場合、各アプリケーションは、適用...
どこでも検索
プロジェクト内またはプロジェクト外のアイテムは、その名前で見つけることができます。単一のエントリポイントから、Git 内のファイル、アクション、クラス、シンボル、設定、UI 要素などを検索できます。プロジェクト内のテキストの検索の詳細については、「プロジェクト内のターゲットを検索する」を参照してください。どこでも検索メインメニューで、に移動するか、を 2 回押して検索ウィンドウを開きます。デフォルトでは、PhpStorm は最近使用したファイルのリストを表示します。もう一度を 2 回押すか、...
ツールウィンドウの表示モード
デフォルトでは、ツールウィンドウはメインウィンドウの端にアタッチされ、常に表示されています。たとえば、特定のツールウィンドウの表示モードを変更して、アクティブな場合にのみ表示したり、ツールウィンドウバーから切り離したりできます。ツールウィンドウの表示モードを変更するメインメニューでに移動し、表示モードを選択します。または、ツールウィンドウのヘッダーでクリックし、を選択して、表示モードを選択します。次のツールウィンドウの表示モードを使用できます。ドック (ピン留め): これは、ツールウィンドウが...
問題ツールウィンドウ
問題ツールウィンドウには、PhpStorm がプロジェクト内で検出した問題がいくつかのタブを使用して表示されます。ウィンドウ内で問題を選択してを押すか、問題をダブルクリックしてエディター内の対応する行に移動します。ツールウィンドウのタブを切り替えるには、とを押します。設計時コードインスペクションが有効になっている場合、このタブには、現在のファイルで見つかったすべてのコードの問題が一覧表示されます。エディターでファイルを切り替えると、リストが更新されます。ツールバー:表示オプション重大度で