WebStorm 2020.1ヘルプ

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

実行 | 構成の編集 | Add New Configuration | %configuration_name%

This page provides descriptions of the configuration-specific items as well as options that are common for all run/debug configurations. To learn how to use this configuration , see Gruntタスクランナーの使用

このダイアログで、Grunt.jsのタスクを実行するための設定を作成します。

始める前に

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

  2. Gruntのインストールの説明に従って、Gruntをインストールしてください。

グランツ固有の設定

項目説明
GruntfileIn this field, specify the location of the Gruntfile.js file to retrieve the definitions of the tasks from. Select the path from the drop-down list or click the the Browse button button and choose the file from the dialog box that opens.
タスクこのフィールドには、実行するタスクを指定します。次のいずれかの操作を行います。
  • 1つのタスクを実行するには、ドロップダウンリストからタスクを選択します。

  • いくつかのタスクを実行するには、セパレータとして空白を使用してテキストボックスに名前を入力します。

引数このテキストボックスに、実行するタスクの引数を指定します。形式 --<parameter_name> <parameter_value>または例: --env developmentを使用します。
Node インタープリターこのフィールドには、使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。
Node オプションこのテキストボックスに、Node.js実行可能ファイルに渡されるNode.js固有のコマンドラインオプションを入力します。詳細については、Node パラメーターを参照してください。
パッケージ grunt-cliこのフィールドには、グローバルにインストールされたgrunt-cliパッケージへのパスを指定します。詳細はGrunt.jsのインストールを参照してください。
環境In this field, specify the environment variables(英語) for the Node.js executable file, if applicable. Click 参照 the Browse button to the right of the field and configure a list of variables in the 環境変数 dialog, that opens:
  • 新しい変数を定義するには、the Add button をクリックして、変数の名前と値を指定します。

  • 変数定義を破棄するには、リストでそれを選択して the Remove buttonをクリックします。

  • 準備ができたら、OKをクリック

変数の定義は、環境変数読み取り専用フィールドにセミコロンを区切り文字として表示されます。例:

  • NODE_PATH : モジュール検索パスの前に付いたディレクトリの : -separatedリスト。

  • NODE_MODULE_CONTEXTS : 独自のグローバルコンテキストでモジュールをロードするには1に設定します。

  • NODE_DISABLE_COLORS : REPLの色を無効にするには1に設定します。

共通

実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。

項目

説明

名前

実行/デバッグ構成の名前を指定して、たとえば実行ポップアップ Alt+Shift+F10から構成を編集または実行するときにすばやく識別します。

並列実行を許可する

この実行構成の複数のインスタンスを並行して実行できるようにする場合に選択します。

デフォルトでは無効になっており、別のインスタンスの実行中にこの構成を開始すると、WebStormは実行中のインスタンスを停止して別のインスタンスを開始することを提案します。これは、実行/デバッグ構成が多くのリソースを消費し、複数のインスタンスを実行する正当な理由がない場合に役立ちます。

プロジェクトファイルとして保存

実行構成設定を含むファイルを保存して、他のチームメンバーと共有します。デフォルトの場所は.idea/runConfigurationsです。ただし、.ideaディレクトリを共有したくない場合は、プロジェクト内の他のディレクトリに構成を保存できます。

デフォルトでは無効になっており、WebStormは実行構成設定を.idea/workspace.xmlに保存します。

ツールバー

実行/デバッグ構成のツリー表示には、プロジェクトで使用可能な構成を管理したり、デフォルトの構成テンプレートを調整したりするのに役立つツールバーがあります。

項目ショートカット説明
the Add buttonAlt+Insert実行/デバッグ構成を作成します。
the Remove buttonAlt+Delete選択した実行/デバッグ構成を削除します。デフォルト設定は削除できません。
CopyCtrl+D選択した実行/デバッグ構成のコピーを作成します。デフォルト設定のコピーを作成してください。
Save configurationこのボタンは、一時的な構成を選択した場合にのみ表示されます。このボタンをクリックして、一時的な構成を永続的なものとして保存します。
Edit Templatesテンプレート(つまり、デフォルトの実行/デバッグ構成設定)を表示および編集します。テンプレートはテンプレートノードに表示され、新しく作成された構成に使用されます。
Method up / Method downAlt+Up / Alt+Down

選択した実行/デバッグ構成をリスト内で上下に移動します。

リスト内の設定の順序によって、実行/デバッグ構成を選択したときに表示される設定の順序が決まります。

実行/デバッグ構成のデフォルトのテンプレートは、常にアルファベット順にソートされています。

Move into new folder / Create new folder

新しいフォルダーに移動/新しいフォルダーを作成します。実行/デバッグ構成は、フォルダーに配置することでグループ化できます。

フォルダーを作成するには、カテゴリ内の設定を選択し、Folderをクリックしてフォルダー名を指定します。カテゴリだけにフォーカスがある場合は、空のフォルダーが作成されます。

次に、設定をフォルダー内、フォルダー間、またはフォルダー外に移動するには、ドラッグまたは Move Up ボタンと Move Down ボタンを使用します。

グループ化を解除するには、フォルダーを選択して Remove Configurationをクリックします。

Sort configurationsこのボタンをクリックすると、設定がアルファベット順にソートされます。

起動前

この領域では、選択した実行/デバッグ構成を開始する前に実行しなければならないタスクを指定できます。タスクはリストに表示されている順序で実行されます。

項目ショートカット説明
the Add buttonAlt+Insert

このアイコンをクリックして、以下の使用可能なタスクのいずれかを追加します。

  • 外部ツールの実行 : 外部アプリケーションを実行するように選択します。開いたダイアログで、実行したい1つまたは複数のアプリケーションを選択します。WebStormでまだ定義されていない場合は、その定義を追加してください。詳しくは、外部ツールおよび外部ツールを参照してください。

  • 別の構成を実行 : 別の実行/デバッグ構成を実行することを選択します。開いたダイアログで、実行する設定を選択します。

  • ファイル監視の実行 : WebStormに現在アクティブなすべてのファイル監視を適用させるには、このオプションを選択します。

  • Grunt タスクの実行 : Gruntタスクを実行するには、このオプションを選択してください。

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

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

  • gulp タスクの実行 : Gulpタスクを実行するには、このオプションを選択してください。

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

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

  • npm スクリプトの実行 : npmスクリプトを実行するには、このオプションを選択してください。

    開いたNPMスクリプトダイアログで、npm実行/デバッグ構成設定を指定します。
  • React Native Bundler の開始 : select this option to run the bundler automatically, as part of a running or debugging session. by default, this is done through react-native start . If your application uses Expo(英語) , you need to run the development server via the start npm task. To do that, click Add , then in the React Nativeの設定 dialog, choose npm script and select start from the list.

  • TypeScript のコンパイル : 組み込みTypeScriptコンパイラを実行するように選択し、TypeScriptコードに加えたすべての変更が生成されたJavaScriptファイルに反映されるようにします。表示されるTypeScriptコンパイル設定ダイアログで、エラーをチェックチェックボックスを選択または選択解除して、エラーが検出された場合のコンパイラの動作を設定します。

    • エラーをチェックチェックボックスが選択されていると、コンパイラーはすべてのエラーを表示し、実行構成は開始されません。

    • エラーをチェックチェックボックスがオフの場合、コンパイラは検出されたすべてのエラーを表示しますが、実行構成は起動されます。

  • CoffeeScript ソース・マップの生成 : CoffeeScriptソースのソースマップを生成するには、このオプションを選択してください。表示されるダイアログで、CoffeeScriptのソースファイルがある場所を指定します。

  • リモートホストにファイルをアップロードする : select this option to have the application files automatically uploaded to the server according to the default server access configuration

the Remove buttonAlt+Deleteこのアイコンをクリックして、選択したタスクをリストから削除します。
EditEnter選択したタスクを編集するには、このアイコンをクリックします。開いたダイアログで必要な変更を加えます。
Method up / Method downAlt+Up / Alt+Downこれらのアイコンをクリックして、選択したタスクをリスト内で1行上または下に移動します。タスクは、リストに表示されている順に実行されます。
このページを表示する実行/デバッグ構成を実際に開始する前に、実行/デバッグ構成設定を表示するには、このチェックボックスを選択します。
ツール・ウィンドウをアクティブにする

デフォルトではこのチェックボックスは選択されており、実行/デバッグ構成を開始すると実行またはデバッグツールウィンドウが開きます。

それ以外の場合、チェックボックスがオフの場合、ツールウィンドウは非表示になります。ただし、構成が実行されている場合は、Alt+4 または Alt+5を押すことにより、構成に対応するツールウィンドウを自分で開くことができます。

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

関連ページ:

Gruntタスクランナーの使用

WebStormはGrunt JavaScript Task Runnerと統合されます。WebStormは、Gruntfile.jsファイルを解析し、タスクとターゲットの定義を認識し、ツリービューにタスクとターゲットを表示し、ツリー内のタスクまたはターゲットとGruntfile.jsファイル内のそ...

Node.js

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

実行/デバッグ構成を操作する

WebStormでコードを実行またはデバッグするには、実行/デバッグ構成を使用できます。各実行/デバッグ構成は、名前付きの実行/デバッグ起動プロパティのセットを表します。WebStormを使用して実行、デバッグ、またはテストの操作を実行するときは、常にそのパラメーターを使用して、既存の構成のいずれか...

実行/デバッグ構成をグループ化するフォルダーを作成する

同じタイプの実行/デバッグ構成が多すぎる場合、フォルダーにグループ化して、視覚的に区別しやすくすることができます。フォルダーが不要になったら、削除できます。このフォルダーにグループ化された実行/デバッグ構成は、対応する実行/デバッグ構成タイプのルートに移動されます。グループ化すると、実行/デバッグ構...

外部ツール

コンパイラ、linter、コードコンプレッサーなどのサードパーティのスタンドアロンアプリケーションを使用する推奨方法は、ツール固有のファイル監視を構成することです。このファイル監視は、ファイルの変更を追跡し、必要に応じてアプリケーションを自動的に実行します。詳細については、ファイル監視を参照してくだ...

ファイル監視

ファイル監視は、ファイルへの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行するWebStormシステムです。WebStormは、このような一般的なサードパーティ製ツール(コンパイラー、コンプレッサー、プリティファイアーなど)の多くに事前定義されたファイル監視テンプレートを提供しま...