gulpfile.jsをディレクトリにしてタスク管理

Gulpを使ってタスクを管理する際、gulpfile.jsが肥大化してくるとgulpfile.js(ファイル)とgulp/tasks(ディレクトリ)などと分割して管理していました。が、gulpfile.jsをディレクトリにする事でちょっと気持ちいいディレクトリ構造を作れる事を知ったのでメモ。

3行でまとめると…

  1. gulpfile.js はファイルである必要がない
  2. gulpfile.js ディレクトリ にindex.jsを置けばOK
  3. gulpfile.babel.jsでもOK

gulpfile.js をディレクトリ!!?

gulp実行時、内部的には単純にrequire('gulpfile.js')と、Node.jsのrequire()が呼ばれているだけのもよう。
そのため、通常のnodeモジュール利用時と同じくgulpfile.jsをディレクトリにし、index.jsを配置すればindex.jsが読み込まれるというぐあい。

たとえば…

├── gulpfile.js
│   └── index.js
│   └── tasks
│       └── build.js
└── package.json

こんな感じ。

gulpfile.babel.js でES2015も

gulpfile.babel.jsという命名にする事でBabelを通してES2015なシンタックスを利用できるので、これもディレクトリ名をgulpfile.babel.jsにすればBabelを通して実行してくれる。
(※もちろん、Babel関連のパッケージが必要。くわしくはQiitaとか見ればある)

├── gulpfile.babel.js
│   ├── index.js
│   └── tasks
│       └── build.js
└── package.json

こんな感じ。

何がおいしいのか

冒頭の通り、今までは、gulpfile.jsファイル と gulp ディレクトリを分けていていたのですが、gulpfile.jsディレクトリの中に設定(config.jsonとか),タスク(tasks/*)をひとまとめに管理できるようになった。てだけ。

おまけ

gulp利用時は、npm i -g gulpしないでnpm-scriptを使った方が便利そう。なので、package.jsonをこんな感じにして

{
  ...
  "scripts": {
    "gulp": "gulp"
  }
}

実行時は npm run gulp [,args...] とかしてる。

SHOTA

I'm WEB developer

Tokyo, Japan http://senta.me/