Gulp
JetBrains Rider は Gulp.js タスクランナーと連携します。 JetBrains Rider は Gulpfile.js ファイルを解析し、タスクの定義を認識、タスクをツリービューで表示し、ツリー内のタスクと Gulpfile.js ファイルでの定義間のナビゲートができ、タスクの実行やデバッグをサポートします。
Gulp.js タスクは、専用の Gulp ツールウィンドウのタスクツリーから、または Gulpfile.js ファイルで Gulp.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 は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用できます。
Gulp.js は、 エクスプローラー ツールウィンドウ (Alt+1) 内の Gulpfile.js またはエディターで開いた Gulpfile.js のコンテキストメニューから Gulp タスクの表示 を選択して Gulp.js を起動するとすぐに、 タスクツリーの構築を開始します。 ツリーは、Gulp.js が起動された Gulpfile.js ファイルに基づいて構築されます。 プロジェクトに複数の Gulpfile.js ファイルがある場合、それぞれのファイルに対して個別のタスクツリーを構築し、以前に構築したタスクツリーを破棄することなくタスクを実行できます。 各ツリーは、個別のノードに表示されます。
技術的には、JetBrains Rider が Gulp.js を呼び出し、 Gulpfile.js を デフォルトの Gulp.js 実行構成に従って処理します。 これは静かに行われ、あなたからのステップを必要としません。
Gulp ツールウィンドウを開く
現在の JetBrains Rider セッションで初めてタスクのツリーをビルドすると、 Gulp ツールウィンドウはまだ開かれていません。
エクスプローラー ツールウィンドウ（Alt+1 ）で必要な Gulpfile.js ファイルを選択するか、エディターでファイルを開き、コンテキストメニューから Gulp タスクの表示 を選択します。
デフォルトでは、JetBrains Rider は Gulpfile.js の ES6 を認識せず、タスクのツリーをビルドできません。 この問題を解決するには、 デフォルトの Gulp.js 構成を実行を更新してください。
ES6 Gulpfile.js からタスクツリーを構築する
に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。
テンプレート ノードで、 Gulp.js をクリックします。
開いた 実行/デバッグ構成：Gulp.js ダイアログで、 ノードオプション フィールドに
--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 は ノードランタイム フィールドがある JavaScript ランタイムページのプロジェクトデフォルトインタープリターを自動的に使用します。 ほとんどの場合、JetBrains Rider はプロジェクトのデフォルトランタイムを検出し、フィールドに自動入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。必要に応じて、Node.js の 環境変数(英語)と、タスクを実行するための引数を指定します。
--<parameter_name> <parameter_value>のフォーマットを使用します。例えば：--env development。 詳細は Gulp オフィシャル Web サイト をご覧ください。
タスクを実行する
ツールバーの 実行 / デバッグ構成 ウィジェットリストから、新しく作成した 構成を選択し、その横にある
をクリックします。 出力は 実行ツールウィンドウに表示されます。
タスクをデバッグする
上記のように Gulp.js 実行 / デバッグ構成を作成します。
エディターで Gulpfile.js ファイルを開き、必要に応じて ブレークポイント を設定します。
デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある
をクリックするか、メインメニューから を選択します。開いた デバッグウィンドウ で、 中断されたプログラムを調べる や コードをステップスルーする に従い、中断されたタスク実行を分析したりタスクをステップ実行したりします。
Gulp タスクを起動前タスクとして実行する
メインメニューから を選択して 実行/デバッグ構成ダイアログ を開き、リストから必要な構成を選択するか、
をクリックして関連する実行構成タイプを選択し新規作成します。開いたダイアログで、 起動前 エリアの
をクリックし、リストから Gulp タスクの実行 を選択します。表示される Gulp タスク ダイアログで、必要なタスクが定義されている Gulpfile.js を指定し、実行するタスクを選択して、Gulp ツールに渡す引数を指定します。
Node.js ランタイムの場所、それに渡すパラメーター、 gulp パッケージへのパスを指定します。
Gulp.js タスクを自動的に実行する
定期的に実行するタスクがいくつかある場合は、対応する実行構成を 起動タスクのリストに追加できます。 タスクはプロジェクトの起動時に自動的に実行されます。
設定 ダイアログ（Ctrl+Alt+S ）で、 ツール の スタートアップタスク をクリックします。
開いた 起動タスクページで、ツールバーの
をクリックします。リストから、必要な Gulp.js 実行構成を選択します。 設定がリストに追加されます。
プロジェクトに適用可能な構成がない場合は、
をクリックして 実行構成の編集 を選択します。 次に、開いた 実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。 新しい設定を保存すると、自動的に起動タスクのリストに追加されます。