JetBrains Rider 2024.1 ヘルプ

Grunt

JetBrains Rider は Grunt JavaScript Task Runner(英語) と一体化しています。JetBrains Rider は、タスクとターゲットの定義を認識し、ツリービューでタスクやターゲットを表示し、Gruntfile.js ファイル内のタスクまたはターゲットと、タスクとターゲットの実行とデバッグをサポートする Gruntfile.js ファイルを解析します。

JetBrains Rider では、専用の Grunt ツールウィンドウのタスクツリーから、または Grunt 実行構成を使用して、または起動前のタスクとして、Grunt タスクを実行できます。JetBrains Rider は実行ツールウィンドウでタスクを実行した結果を示します。ツールウィンドウには Grunt の出力が表示され、エラーが発生したことが表示され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。

始める前に

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

Grunt のインストール

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

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

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

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

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

    npm install -g grunt-cli

プロジェクトに Grunt をインストールする

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

    npm install grunt --save-dev

タスクツリーから Grunt タスクを実行する

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

Grunt ツールウィンドウを開く

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

  • ソリューションエクスプローラーで必要な Gruntfile.js ファイルを選択するか、エディターで開いてコンテキストメニューから Grunt タスクの表示を選択します。

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

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

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

ツリーを再構築する

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

ツリー内のタスクを名前で並べ替える

  • ツールバーの Settings をクリックし、メニューから並べ替えを選択してから、名前を選択します。

    デフォルトでは、ツリーには、Gruntfile.js(オプション定義順序)で定義されている順序でタスクが表示されます。

タスクまたはターゲットを実行する

  • タスクまたはターゲットをダブルクリックします。

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

タスクツリーからタスクを実行する場合、強制実行詳細モードのオプションは使用できないことに注意してください。その結果、たとえば、警告を無視したり、詳細なログを提供したりするように JetBrains Rider を構成することはできません。これらのオプションを使用するには、以下の実行構成に応じたタスクの実行とデバッグに従って、実行構成からタスクまたはターゲットを実行します。

デフォルトのタスクを実行する

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

いくつかのタスクまたはターゲットを実行する

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

タスクまたはターゲットの定義に移動する

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

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

タスクを実行するときに JetBrains Rider が自動的に作成する一時的な実行構成を使用する以外に、独自の Grunt.js 実行構成を作成して起動できます。

Grunt.js の実行 / デバッグ構成を作成する

  1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

    Open the Edit Configurations dialog

    開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (the Add button) をクリックし、リストから Grunt.js を選択します。実行 / デバッグ構成: Grunt.js ダイアログが開きます。

  2. 実行構成の名前、実行するタスク(区切り文字として空白スペースを使用)、これらのタスクが定義されている Gruntfile.js ファイルの場所、およびグローバルにインストールされた grunt-cli パッケージへのパスを指定します。

  3. 使用する Node.js インタープリターを指定します。

    プロジェクトエイリアスを選択すると、JetBrains Rider は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、JetBrains Rider はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、the Browse button をクリックして新しいインタープリターを構成することもできます。

    必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーター環境変数(英語)を指定します。

タスクを実行する

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

タスクをデバッグする

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

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

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

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

Grunt タスクを起動前タスクとして実行する

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

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

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

    Node.js インタープリターの場所、渡すパラメーター、grunt-cli パッケージへのパスを指定します。

Grunt タスクを自動的に実行する

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

  1. 設定 / 環境設定ダイアログ(Ctrl+Alt+S)で、ツール | スタートアップタスクに移動します。

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

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

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

関連ページ:

実行 / デバッグ構成: Grunt.js

作成: このダイアログで、Grunt.js のタスクを実行するための設定を作成します。始める前に:Node.js をダウンロードしてインストールします。Grunt のインストールの説明に従って、Grunt をインストールしてください。Grunt 固有の構成設定:Gruntfile このフィールドでは、タスクの定義を取得する Gruntfile.js ファイルの場所を指定します。ドロップダウンリストからパスを選択するか、ボタンをクリックして、表示されるダイアログからファイルを選択します。タスクこのフィー...

実行 / デバッグ構成: Node.js

作成: 次の Node.js バージョンは、JetBrains Rider 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このダイアログで、コンピューター上の Node.js アプリケーションと一緒にデバッガーを開始するための構成を作成します。始める前に:Node.js をダウンロードしてインストールします。Je...

ブレークポイント

ブレークポイントを使用すると、特定のステートメントでプログラムの実行を一時停止し、変数値、コールスタック、その他のプログラムパラメーターを分析したり、式を評価したり、プログラムをステップ実行したりできます。JetBrains Rider では、次の型のブレークポイントを操作できます。行ブレークポイント、コード内の特定の文に設定できます。実行がこの行に達すると、デバッガーはプログラムの実行を中断します。行ブレークポイントは実行可能な行にのみ設定できます。コメント、宣言、空行は、行ブレークポイントの...

デバッグウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、スレッド、変数など)を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。ツールウィンドウのタブを切り替えるには、とを押します。セッション:複数のデバッグセッションを同時に実行すると、それらはデ

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

フレームを分析することで、中断されたアプリケーションの状態を調べることができます。コードがデバッグモードで実行されている場合、それを一時停止するには 2 つの方法があります。検査するコード内のブレークポイントの設定で、いずれかがヒットするまで待機します。でプログラムの実行を中断します。デバッガーは、一時停止した瞬間に実行中のステートメントを終了し、次に実行する必要のあるステートメントで停止します。一時停止状態では、現在の実行ポイント(次に実行されるステートメント)は、エディターの左側のガターにあ...

Flow

Flow は、JavaScript に型アノテーションをもたらす静的型チェッカーです。JetBrains Rider は Flow 構造を認識し、すべてのオペレーティングシステムでそれらの構文をハイライトします。始める前に:Node.js をダウンロードしてインストールします。Flow のインストールと構成:埋め込まれたターミナルで、次のいずれかのコマンドを入力します。を使用して Flow をグローバルにインストールします。開発依存として Flow をインストールするための、Flow オフィシャル W...