WebStorm 2020.1ヘルプ

Gulpタスクランナーの使用

WebStorm integrates with the Gulp.jsタスクランナー(英語) . WebStorm parses Gulpfile.js files, recognizing definitions of tasks, shows tasks in a tree view, lets you navigate between a task in the tree and its definition in the Gulpfile.js file, and supports running and debugging tasks.

Gulp.js tasks can be run from the tasks tree in the dedicated Gulpツールウィンドウ , or from the Gulpfile.js file, by launching a Gulp.jsの実行構成 , or as aa before-launch task from another run configuration. WebStorm shows the result of executing a task in the 実行ツール・ウィンドウ . The tool window shows the Grunt output, reports the errors occurred, lists the packages or plugins that have not been found, etc. The name of the last executed task is displayed on the title bar of the tool window.

Gulp.jsのインストール

WebStormプロジェクトでGulpを使用するには、2つのパッケージが必要です。

  • Gulpコマンドを実行するためにグローバルにインストールされたgulp-cliパッケージ(Gulpコマンドラインインターフェース)。

  • A gulp package installed as a development dependency to build the project tasks tree and provide coding assistance while editing the Gulpfile.js file. Learn more about Gulpfile.js from the Gulp.js公式サイト(英語)

gulp-cliをグローバルにインストールするには

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install -global gulp-cli

Gulp.jsをプロジェクトにインストールするには

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install gulp --save-dev

npmとYarnで説明されているように、Node.jsとNPMページにパッケージをインストールすることもできます。

タスクツリーからGulp.jsタスクを実行する

WebStormを使用すると、GulpツールウィンドウのタスクツリーからGulp.jsタスクを簡単かつ迅速に実行できます。WebStormは自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。

Gulp.js starts building a tasks tree as soon as you invoke Gulp.js by choosing Gulp タスクの表示 on the context menu of a Gulpfile.js in the プロジェクト tool window or of a Gulpfile.js opened in the editor. The tree is built according to the Gulpfile.js file on which Gulp.js was invoked. If you have several Gulpfile.js files in your project, you can build a separate tasks tree for each of them and run tasks without abandoning the previously built tasks trees. Each tree is shown under a separate node.

Technically, WebStorm invokes Gulp.js and processes Gulpfile.js according to the デフォルトのGulp.js構成を実行 . This is done silently and does not require any steps from your side.

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

現在のWebStormセッション中に初めてタスクツリーを構築すると、Gulpツールウィンドウはまだ開かれていません。

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

By default WebStorm does not recognize ES6 in Gulpfile.js and fails to build a tasks tree. To solve this problem, update the デフォルトのGulp.js構成を実行

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

  1. メインメニューから実行 | 構成の編集を選択します。

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

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

Gulpツールウィンドウからタスクのツリーを構築するには

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

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

ツリーを再構築する

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

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

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

タスクを実行するには

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

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

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

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

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

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

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

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

Gulpfile.jsからタスクを実行する

  1. 実行するタスクの定義にカーソルを置き、コンテキストメニューから実行<タスク名>を選択します。WebStormは、選択したタスクの名前で一時的な実行構成を作成して起動します。

  2. 自動的に登録された一時実行構成を保存するには、それが登録されたタスクの定義にカーソルを置き、選択のコンテキストメニューから<タスク名>を保存を選択します。

実行構成に応じたタスクの実行とデバッグ

WebStormが自動的に作成する一時的な実行構成を使用する以外にも、独自のGulp.js実行構成を作成して起動することができます。

Gulp.js実行構成を作成するには

  1. メインメニューから実行 | 構成の編集を選択します。

  2. ツールバーの the Add button をクリックして、リストからGulp.jsを選択します。実行/デバッグ構成:Gulp.jsダイアログが開きます。

  3. Specify the name of the run configuration, the tasks to run (use blank spaces as separators), the location of the Gulpfile.js file where these tasks are defined, and the path to the gulp package installed under the current project root.

  4. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

    Optionally, specify the environment variables(英語) for Node.js and the arguments for executing the tasks. Use the format --<parameter_name> <parameter_value> , for example: --env development . Learn more from the GulpオフィシャルWebサイト(英語)

タスクを実行するには

  • メインツールバーのリストから新しく作成した実行構成を選択し、リストの横にある the Run button をクリックします。出力は実行ツール・ウィンドウに表示されます。

タスクをデバッグするには

  1. Create a Gulp.js run/debug configuration as described above.

  2. エディターでGulpfile.jsファイルを開き、必要に応じてファイルにブレークポイントを設定します。

  3. デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある the Debug button をクリックするか、メインメニューから実行 | デバッグ<構成名>を選択します。

  4. 開いたデバッグツールウィンドウで、中断されたプログラムを調べるプログラムのステップ・スルーに従って、中断されたタスクの実行を分析し、タスクをステップスルーするなどします。

Gulpタスクを実行前タスクとして実行するには

  1. メインメニューで実行 | 構成の編集を選択して実行/デバッグ構成ダイアログを開き、リストから必要な構成を選択するか、the Add button をクリックして関連する実行構成タイプを選択することにより、新しい構成を作成します。

  2. 開いたダイアログで、起動前エリアの the Add button をクリックし、リストからgulp タスクの実行を選択します。

  3. 開いたGulp タスクダイアログで、必要なタスクが定義されているGulpfile.jsを指定し、実行するタスクを選択して、Gulpツールに渡す引数を指定します。

    Node.jsインタープリターの場所、それに渡すパラメーター、およびgulpパッケージへのパスを指定します。

Gulp.jsタスクを自動的に実行する

If you have some tasks that you run on a regular basis, you can add the corresponding run configurations to a list of startup tasks. The tasks will be executed automatically on the project start-up.

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、ツール開始タスクをクリックします。

  2. 開いた起動タスクページで、ツールバーの the Add button をクリックします。

  3. リストから、必要なGulp.js実行構成を選択します。設定がリストに追加されます。

    プロジェクトに適用可能な構成がない場合は、the Add button` をクリックして構成の編集を選択します。次に、開いた実行/デバッグ構成:Gulp.jsページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

最終更新日: 2020年6月23日

関連ページ:

Gulpツールウィンドウ

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

npmおよびYarn

WebStormはnpm、Yarn、およびYarn 2と統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコマンドライ...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

ブレークポイント

ブレークポイントは、特定の時点でプログラムの実行を中断してその動作を調べるためのソースコードマーカーです。設定すると、ブレークポイントは明示的に削除するまでプロジェクトに残ります(一時行ブレークポイントを除く)。ブレークポイントを持つファイルが外部で変更された場合、たとえば、VCSを介して更新される...

デバッグツールウィンドウ

デバッガセッションを開始すると、WebStormはデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガアクションを実行し、プログラムデータ(フレーム、スレッド、変数など)を分析できます。コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。ツールウィン...

中断されたプログラムを調べる

After the debugger session hasstarted, theデバッグtool window will appear, and the program will run normally until abreakpointis hit or youpausethe progra...