Gulp
PyCharm は Gulp.js タスクランナー(英語)と一体化しています。PyCharm は、タスクの定義を認識し、タスクをツリービューで表示し、ツリー内のタスクと Gulpfile.js ファイルの定義を移動し、タスクの実行とデバッグをサポートする Gulpfile.js ファイルを解析します。
Gulp.js タスクは、専用の Gulp ツールウィンドウのタスクツリーから、または Gulp.js の実行構成を起動して Gulpfile.js ファイルから、または別の実行構成からの起動前タスクとして実行できます。PyCharm は、実行ツールウィンドウでタスクを実行した結果を示します。ツールウィンドウには Grunt 出力が表示され、発生したエラーが報告され、見つからなかったパッケージまたはプラグインが一覧表示されます。ツールウィンドウのタイトルバーには、最後に実行されたタスクの名前が表示されます。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
Gulp.js のインストール
PyCharm プロジェクトで 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 タスクを実行する
PyCharm を使用すると、Gulp ツールウィンドウのタスクツリーから Gulp.js タスクを簡単かつ迅速に実行できます。PyCharm は自動的に一時的な実行構成を作成し、必要に応じて保存して後で使用することができます。
プロジェクトツールウィンドウの Gulpfile.js またはエディターで開いた Gulpfile.js のコンテキストメニューで Gulp タスクの表示を選択して Gulp.js を呼び出すとすぐに、Gulp.js はタスクツリーの構築を開始します。ツリーは、Gulp.js が呼び出された Gulpfile.js ファイルに従って構築されます。プロジェクトに複数の Gulpfile.js ファイルがある場合は、それぞれに個別のタスクツリーを構築し、以前に構築されたタスクツリーを破棄せずにタスクを実行できます。各ツリーは個別のノードに表示されます。
技術的には、PyCharm は Gulp.js を呼び出し、デフォルトの Gulp.js 構成を実行に従って Gulpfile.js を処理します。これは静かに行われ、あなたからのステップを必要としません。
Gulp ツールウィンドウを開く
現在の PyCharm セッション中に初めてタスクツリーを構築すると、Gulp ツールウィンドウはまだ開かれていません。
プロジェクトツールウィンドウで必要な Gulpfile.js ファイルを選択するか、エディターで開いてコンテキストメニューから Gulp タスクの表示を選択します。
デフォルトでは、PyCharm は Gulpfile.js の ES6 を認識せず、タスクツリーの構築に失敗します。この問題を解決するには、デフォルトの Gulp.js 構成を実行を更新してください。
ES6 Gulpfile.js からタスクツリーを構築する
に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。
テンプレートノードで、Gulp.js をクリックします。
開いた実行 / デバッグ構成: Gulp.js ダイアログで、Node オプションフィールドに
--harmonyと入力し、OK をクリックします。
Gulp ツールウィンドウからタスクのツリーを構築する
Gulp ツールウィンドウで、ツールバーの
をクリックし、リストから必要な Gulpfile.js ファイルを選択します。デフォルトでは、PyCharm はプロジェクトのルートに Gulpfile.js ファイルを表示します。別の Gulpfile.js ファイルがある場合は、Gulpfile.js を選択をクリックし、表示されるダイアログで必要な Gulpfile.js ファイルを選択します。PyCharm は、タイトルに選択した Gulpfile.js ファイルへのパスを持つ新しいノードを追加し、新しいノードにタスクツリーを構築します。
ツリーを再構築する
必要なノードに切り替えて、ツールバーの
をクリックします。
ツリー内のタスクを名前で並べ替える
ツールバーの
をクリックし、メニューから並べ替えを選択し、次に名前を選択します。デフォルトでは、ツリーには、Gulpfile.js（オプション定義順序）で定義されている順序でタスクが表示されます。
タスクの実行
タスクをダブルクリックしてください。
ツリーでタスクを選択して Enter を押すか、コンテキストメニューから実行 <タスク名> を選択します。
デフォルトのタスクを実行する
ツリーのルートノードを選択して、コンテキストメニューからデフォルトを実行を選択します。
いくつかのタスクを実行する
複数選択モードを使用します。Shift （隣接明細の場合）または Ctrl （隣接しない明細の場合）キーを押しながら必要なタスクを選択し、選択のコンテキストメニューから実行またはデバッグを選択します。
タスクの定義に移動する
ツリーで必要なタスクを選択して、選択のコンテキストメニューからソースに移動を選択します。
Gulpfile.js からタスクを実行する
実行するタスクの定義にキャレットを置き、コンテキストメニューから実行 <タスク名> を選択します。PyCharm は、選択したタスクの名前で一時的な実行構成を作成し、起動します。
自動的に作成された一時的な実行構成を保存するには、その構成が作成されたタスクの定義にキャレットを置き、選択内容のコンテキストメニューから <タスク名> の保存を選択します。
実行構成に応じたタスクの実行とデバッグ
PyCharm が自動的に作成する一時的な実行構成を使用する以外にも、独自の Gulp.js 実行構成を作成して起動することができます。
Gulp.js 実行構成を作成する
に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから Gulp.js を選択します。実行 / デバッグ構成: Gulp.js ダイアログが開きます。実行構成の名前、実行するタスク（区切り文字として空白を使用）、これらのタスクが定義されている Gulpfile.js ファイルの場所、および現在のプロジェクトルートにインストールされている gulp パッケージへのパスを指定します。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、PyCharm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、PyCharm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。必要に応じて、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 ツールウィンドウ
このツールウィンドウを使用して Gulp.js のタスクを実行します。タスクの実行結果が実行ツールウィンドウに表示されます。ツールウィンドウには Gulp.js の出力が表示され、発生したエラーが報告され、見つからなかったパッケージまたはプラグインが一覧表示されます。最後に実行されたタスクの名前がツールウィンドウのタイトルバーに表示されます。始める前に：Node.js をダウンロードしてインストールします。gulp-cli パッケージ (Gulp コマンドラインインターフェース) をグローバルにイン...
ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類：PyChar
デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ（フレーム、変数など）を表示および分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。ツールウィンドウのタブを切り替えるには、とを押します。セッションタブ、デバッガーコンソールタブ、変数と監視、フレーム、デバッガーツ
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる：プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティ
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。PyCharm は、戦略に応じて使用される一連のステップアクションを提供します（たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど）。ステップボタンは、デバッグウィンドウのツールバーにあります。ステップオーバー：現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接移動します。...