Gulp関連のファイルを全てフォルダにまとめる方法

課題

Gulpのタスクを別ファイルに分割して、フォルダにまとめる際、gulpfile.js もフォルダに入れてしまうと No gulpfile found というエラーが出てしまうので、 gulpfile.js だけフォルダの外に出していました。
できれば、Gulp 関連のファイルを一つのフォルダにまるっと納めたいと思っていました。

解決方法

gulpfile.js という「フォルダ」を作り、その中に index.js ファイルを置いてあげると良い事が分かりました。
index.js がいつもの gulpfile.js として機能します。

TypeScript で書きたい場合は、拡張子を .ts にして、typescript、ts-node、@types/gulp をインストールするだけです。

npm i -D typescript ts-node @types/gulp

タスクの実行方法は通常と同様です。また、JavaScript でも TypeScript でも同じです。

# default タスクの実行例
npx gulp

# build タスクの実行例
npx gulp build

フォルダ構成例

以下は sample プロジェクトで Gulp 関連のファイルを gulpfile.js（.ts）フォルダにまとめた例です。

JavaScript版

sample
└── gulpfile.js  <-- フォルダ名
　   　├── index.js  <-- 必須。gulpfile.js として機能
　   　├── tasks
　   　│   ├── clean.js
　   　│   ├── build.js
　   　│   └──　　watch.js
　   　└── constants
　    　   └── paths.js

TypeScript版

sample
└── gulpfile.ts  <-- フォルダ名
　   　├── index.ts  <-- 必須。gulpfile.ts として機能
　   　├── tasks
　   　│   ├── clean.ts
　   　│   ├── build.ts
　   　│   └──　　watch.ts
　   　└── constants
　    　   └── paths.ts

使用例

gulpfile.ts フォルダの中は、上記の構成例と少し違いますが、npm に公開したプロジェクトのリンクを載せておきます。

tatsuteb/StepBarStyle

参考URL

公式ドキュメントの該当箇所

JavaScript and Gulpfiles - Splitting a gulpfile