Posted at

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