Gulp
JetBrains Rider は Gulp.js タスクランナー(英語)と一体化しています。JetBrains Rider は、タスクの定義を認識し、タスクをツリービューで表示し、ツリー内のタスクと Gulpfile.js ファイルの定義を移動し、タスクの実行とデバッグをサポートする Gulpfile.js ファイルを解析します。
Gulp.js タスクは、専用の Gulp ツールウィンドウのタスクツリーから、または Gulp.js の実行構成を起動して Gulpfile.js ファイルから、または別の実行構成からの起動前タスクとして実行できます。JetBrains Rider は、実行ツールウィンドウでタスクを実行した結果を示します。ツールウィンドウには Grunt 出力が表示され、発生したエラーが報告され、見つからなかったパッケージまたはプラグインが一覧表示されます。ツールウィンドウのタイトルバーには、最後に実行されたタスクの名前が表示されます。
始める前に
Node.js をダウンロードしてインストールします。
Gulp.js のインストール
JetBrains Rider プロジェクトで Gulp を使用するには、2 つのパッケージが必要です。
Gulp コマンドを実行するためにグローバルにインストールされた gulp-cli パッケージ（Gulp コマンドラインインターフェース）。
プロジェクトのタスクツリーを構築し、Gulpfile.js ファイルの編集中にコーディング支援を提供する開発依存関係としてインストールされた gulp パッケージ。Gulp.js 公式サイト(英語)から Gulpfile.js の詳細を学びましょう。
gulp-cli をグローバルにインストールする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install -global gulp-cli
プロジェクトに Gulp.js をインストールする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install gulp --save-dev
タスクツリーから Gulp.js タスクを実行する
JetBrains Rider を使用すると、Gulp ツールウィンドウのタスクツリーから Gulp.js タスクを簡単かつ迅速に実行できます。JetBrains Rider は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。
ソリューションエクスプローラーの Gulpfile.js またはエディターで開いた Gulpfile.js のコンテキストメニューで Gulp タスクの表示を選択して Gulp.js を呼び出すとすぐに、Gulp.js はタスクツリーの構築を開始します。ツリーは、Gulp.js が呼び出された Gulpfile.js ファイルに従って構築されます。プロジェクトに複数の Gulpfile.js ファイルがある場合は、それぞれに個別のタスクツリーを構築し、以前に構築されたタスクツリーを破棄せずにタスクを実行できます。各ツリーは個別のノードに表示されます。
技術的には、JetBrains Rider は Gulp.js を呼び出し、デフォルトの Gulp.js 構成を実行に従って Gulpfile.js を処理します。これは静かに行われ、あなたからのステップを必要としません。
Gulp ツールウィンドウを開く
現在の JetBrains Rider セッション中に初めてタスクツリーを構築すると、Gulp ツールウィンドウはまだ開かれていません。
ソリューションエクスプローラーで必要な Gulpfile.js ファイルを選択するか、エディターで開いてコンテキストメニューから Gulp タスクの表示を選択します。
デフォルトでは、JetBrains Rider は Gulpfile.js の ES6 を認識せず、タスクツリーの構築に失敗します。この問題を解決するには、デフォルトの Gulp.js 構成を実行を更新してください。
ES6 Gulpfile.js からタスクツリーを構築する
に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。
テンプレートノードで、Gulp.js をクリックします。
開いた実行 / デバッグ構成: Gulp.js ダイアログで、Node オプションフィールドに
--harmonyと入力し、OK をクリックします。
Gulp ツールウィンドウからタスクのツリーを構築する
Gulp ツールウィンドウで、ツールバーの
をクリックして、リストから必要な Gulpfile.js ファイルを選択します。デフォルトでは、JetBrains Rider はプロジェクトのルートに Gulpfile.js ファイルを表示します。別の Gulpfile.js ファイルがある場合は、Gulpfile.js を選択をクリックし、表示されるダイアログで必要な Gulpfile.js ファイルを選択します。JetBrains Rider は、タイトルに選択した Gulpfile.js ファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のタスクを名前で並べ替える
ツールバーの
をクリックし、メニューから並べ替えを選択してから、名前を選択します。デフォルトでは、ツリーには、Gulpfile.js（オプション定義順序）で定義されている順序でタスクが表示されます。
タスクの実行
タスクをダブルクリックしてください。
ツリーでタスクを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。
デフォルトのタスクを実行する
ツリーのルートノードを選択して、コンテキストメニューからデフォルトを実行を選択します。
いくつかのタスクを実行する
複数選択モードを使用します。Shift （隣接明細の場合）または Ctrl （隣接しない明細の場合）キーを押しながら必要なタスクを選択し、選択のコンテキストメニューから実行またはデバッグを選択します。
タスクの定義に移動する
ツリーで必要なタスクを選択して、選択のコンテキストメニューからソースに移動を選択します。
Gulpfile.js からタスクを実行する
実行するタスクの定義にキャレットを置き、コンテキストメニューから実行 <タスク名> を選択します。JetBrains Rider は、選択したタスクの名前で一時的な実行構成を作成し、起動します。
自動的に作成された一時的な実行構成を保存するには、その構成が作成されたタスクの定義にキャレットを置き、選択内容のコンテキストメニューから <タスク名> の保存を選択します。
実行構成に応じたタスクの実行とデバッグ
JetBrains Rider が自動的に作成する一時的な実行構成を使用する以外にも、独自の Gulp.js 実行構成を作成して起動することができます。
Gulp.js 実行構成を作成する
に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから Gulp.js を選択します。実行 / デバッグ構成: Gulp.js ダイアログが開きます。実行構成の名前、実行するタスク（区切り文字として空白を使用）、これらのタスクが定義されている Gulpfile.js ファイルの場所、および現在のプロジェクトルートにインストールされている gulp パッケージへのパスを指定します。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、JetBrains Rider は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、JetBrains Rider はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。必要に応じて、Node.js の環境変数(英語)と、タスクを実行するための引数を指定します。
--<parameter_name> <parameter_value>の形式を使用します。例:--env developmentGulp オフィシャル Web サイト(英語)から詳細を参照してください。
タスクを実行する
ツールバーの実行 / デバッグ構成リストから、新しく作成した 構成を選択し、その横にある
をクリックします。出力は実行ツールウィンドウに表示されます。
タスクをデバッグする
上記のように Gulp.js 実行 / デバッグ構成を作成します。
エディターで Gulpfile.js ファイルを開き、必要に応じてファイルにブレークポイントを設定します。
デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある
をクリックするか、メインメニューから を選択します。開いたデバッグウィンドウで、中断されたプログラムを調べるとコードをステップスルーするに従って、中断されたタスクの実行を分析し、タスクをステップスルーするなどします。
Gulp タスクを起動前タスクとして実行する
メインメニューからを選択して実行 / デバッグ構成ダイアログを開き、リストから必要な構成を選択するか、
をクリックして関連する実行構成タイプを選択して新規に作成します。開いたダイアログで、起動前エリアの
をクリックし、リストから gulp タスクの実行を選択します。表示される Gulp タスクダイアログで、必要なタスクが定義されている Gulpfile.js を指定し、実行するタスクを選択して、Gulp ツールに渡す引数を指定します。
Node.js インタープリターの場所、それに渡すパラメーター、gulp パッケージへのパスを指定します。
Gulp.js タスクを自動的に実行する
定期的に実行するタスクがいくつかある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。
設定 / 環境設定ダイアログ (Ctrl+Alt+S) で、ツールのスタートアップタスクをクリックします。
開いた起動タスクページで、ツールバーの
をクリックします。リストから、必要な Gulp.js 実行構成を選択します。設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、
をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。
関連ページ：
実行 / デバッグ構成: Gulp.js
作成: このダイアログで、Gulp.js のタスクを実行するための設定を作成します。始める前に：Node.js をダウンロードしてインストールします。Gulp.js のインストールの説明に従って、gulp パッケージをインストールします。Gulp.js 固有の構成設定：Gulpfile このフィールドでは、タスクの定義を取得する Gulpfile.js ファイルの場所を指定します。ドロップダウンリストからパスを選択するか、ボタンをクリックして、表示されるダイアログからファイルを選択します。タスクこのフィ...
ブレークポイント
ブレークポイントを使用すると、特定のステートメントでプログラムの実行を一時停止し、変数値、コールスタック、その他のプログラムパラメーターを分析したり、式を評価したり、プログラムをステップ実行したりできます。JetBrains Rider では、次の型のブレークポイントを操作できます。行ブレークポイント、コード内の特定の文に設定できます。実行がこの行に達すると、デバッガーはプログラムの実行を中断します。行ブレークポイントは実行可能な行にのみ設定できます。コメント、宣言、空行は、行ブレークポイントの...
デバッグウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ（フレーム、スレッド、変数など）を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。ツールウィンドウのタブを切り替えるには、とを押します。セッション：複数のデバッグセッションを同時に実行すると、それらはデ
中断されたプログラムを調べる
フレームを分析することで、中断されたアプリケーションの状態を調べることができます。コードがデバッグモードで実行されている場合、それを一時停止するには 2 つの方法があります。検査するコード内のブレークポイントの設定で、いずれかがヒットするまで待機します。でプログラムの実行を中断します。デバッガーは、一時停止した瞬間に実行中のステートメントを終了し、次に実行する必要のあるステートメントで停止します。一時停止状態では、現在の実行ポイント（次に実行されるステートメント）は、エディターの左側のガターにあ...