RubyMine 2020.2 ヘルプ

Gulp

RubyMine は Gulp.js タスクランナー(英語)と一体化しています。RubyMine は、タスクの定義を認識し、タスクをツリービューで表示し、ツリー内のタスクと Gulpfile.js ファイルの定義をナビゲートし、タスクの実行とデバッグをサポートする Gulpfile.js ファイルを解析します。

Gulp.js タスクは、専用の Gulp ツールウィンドウのタスクツリーから、または Gulpfile.js を起動することによって Gulp.js の実行構成ファイルから、または別の実行構成から起動前のタスクとして実行できます。RubyMine は実行ツールウィンドウでタスクを実行した結果を示しています。ツールウィンドウには Grunt の出力の表示、発生したエラーの報告、見つからなかったパッケージまたはプラグインのリストなどが表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。

始める前に

Node.js(英語) をダウンロードしてインストールします。

Gulp.js のインストール

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

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

  • プロジェクトのタスクツリーを構築し、Gulpfile.js ファイルの編集中にコーディング支援を提供する開発依存関係としてインストールされた gulp パッケージ。Gulpfile.js から Gulp.js 公式サイト(英語)の詳細を学びましょう。

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

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

    npm install -global gulp-cli

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

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

    npm install gulp --save-dev

npm、pnpm、および Yarn の説明に従って、パッケージを Node.js と NPM ページにインストールすることもできます。

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

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

Gulp タスクの表示ツールウィンドウの Gulpfile.js またはエディターで開かれたプロジェクトのコンテキストメニューで Gulpfile.js を選択して Gulp.js を呼び出すとすぐに、Gulp.js はタスクツリーの構築を開始します。ツリーは Gulp.js が呼び出された Gulpfile.js ファイルに従って構築されます。プロジェクトに複数の Gulpfile.js ファイルがある場合は、それらのそれぞれに別々のタスクツリーを作成し、以前に作成したタスクツリーを放棄することなくタスクを実行できます。各ツリーは別々のノードに表示されます。

技術的には、RubyMine は Gulp.js を呼び出し、Gulpfile.js に従ってデフォルトの Gulp.js 構成を実行を処理します。これは静かに行われ、あなたからのステップを必要としません。

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

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

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

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

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

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

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

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

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

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

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

ツリーを再構築する

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

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

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

タスクを実行するには

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  3. 実行構成の名前、実行するタスク(区切り文字として空白を使用)、これらのタスクが定義されている Gulpfile.js ファイルの場所、および現在のプロジェクトルートにインストールされている gulp パッケージへのパスを指定します。

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

    必要に応じて、Node.js の環境変数(英語)とタスクを実行するための引数を指定します。形式 --<parameter_name> <parameter_value> を使用します(例: --env development)。Gulp オフィシャル Web サイト(英語)の詳細を参照してください。

タスクを実行するには

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

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

  1. 上記のように Gulp.js 実行 / デバッグ構成を作成します。

  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 タスクを自動的に実行する

定期的に実行するタスクがいくつかある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。

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

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

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

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

最終更新日 : 2020 年 8 月 31 日

関連ページ:

実行ツールウィンドウ

表示 | ツールウィンドウ | 実行実行ツールウィンドウには、アプリケーションで生成された出力が表示されます。複数のアプリケーションを実行している場合は、それぞれが実行 / デバッグ構成が適用された後に名前が付けられたタブに表示されます。各タブの外観は、実行されているアプリケーションのタイプ...

npm、pnpm、および Yarn

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

Node.js

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

ブレークポイント

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

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

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、スレッド、変数など)を表示して分析し、さまざまなデバッガーアクションを実行します。デフォルトでは、プログラムがブレークポイントに到達するとデバ...

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

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたり...