JavaScript および Gulpfile

Gulp では、既存の JavaScript の知識を利用して gulpfile を記述したり、gulpfile の経験を活かしてプレーンな JavaScript を記述したりできます。ファイルシステムとコマンドラインの操作を簡素化するユーティリティがいくつか提供されていますが、それ以外の記述はすべて純粋な JavaScript です。

Gulpfile の説明

gulpfile はプロジェクトディレクトリ内の gulpfile.js という名前のファイルです（Makefile のように Gulpfile.js と大文字で記述することもあります）。gulp コマンドを実行すると自動的に読み込まれます。このファイルでは、src()、dest()、series()、parallel() などの gulp API が表示されることがよくありますが、バニラの JavaScript や Node モジュールも使用できます。エクスポートされた関数はすべて、gulp のタスクシステムに登録されます。

トランスパイル

トランスパイルが必要な言語（TypeScript や Babel など）を使用して gulpfile を記述できます。gulpfile.js の拡張子をその言語を示すものに変更し、対応するトランスパイラモジュールをインストールします。

• TypeScript の場合は gulpfile.ts に名前を変更し、ts-node モジュールをインストールします。
• Babel の場合は gulpfile.babel.js に名前を変更し、@babel/register モジュールをインストールします。

新しいバージョンの node のほとんどは TypeScript や Babel が提供するほとんどの機能をサポートしていますが、import/export 構文は除きます。その構文のみが必要な場合は gulpfile.esm.js に名前を変更し、esm モジュールをインストールします。

このトピックの詳細とサポートされている拡張子の完全なリストについては、gulpfile のトランスパイルドキュメントを参照してください。

gulpfile の分割

多くのユーザーは、すべてのロジックを gulpfile に追加することから始めます。大きくなりすぎた場合は、別々のファイルにリファクタリングできます。

各タスクはそれ自体のファイルに分割し、gulpfile にインポートしてコンポジションすることができます。これにより整理が保たれるだけでなく、各タスクを独立してテストしたり、条件に基づいてコンポジションを変更したりできます。

Node のモジュール解決を使用すると、gulpfile.js ファイルを index.js ファイルを含む gulpfile.js というディレクトリに置き換えることができます。このディレクトリは gulpfile.js として扱われます。このディレクトリには、タスク用の個別のモジュールを含めることができます。トランスパイラを使用している場合は、フォルダーとファイルに名前を付けてください。