gulpfile.coffeeをtask毎に分割する

前回Gulpのすすめとして基本的なgulpの使い方を紹介しました。

大規模開発をしているとタスクが肥大化していきます。
今回はこのタスク毎にファイルを分割してみました。

ディレクトリ構造

今回は以下のような構成にしてみました。

.
├── build
│   ├── assets
│   │   ├── css
│   │   └── js
│   └── views
├── gulp
│   ├── config.coffee
│   └── tasks
│       ├── clean.coffee
│       ├── coffee.coffee
│       ├── default.coffee
│       ├── jade.coffee
│       ├── stylus.coffee
│       └── watch.coffee
├── gulpfile.coffee
├── package.json
└── source
    ├── assets
    │   ├── coffee
    │   │   └── common.coffee
    │   └── stylus
    │       └── common.styl
    └── views
        ├── _header.jade
        └── index.jade

• buildがbuild後のコード
• sourceがbuild前のコード
• gulpにgulp関係のもの
• gulp/tasksがgulpタスク
• gulp/config.coffeeに簡単な設定
  

にしようかと思います。

require-dirを使用する

require-dirとは名前の通りディレクトリを丸ごとrequireするやーつです。

npm install --save-dev require-dir

gulpfile.coffeeでは基本的にrequireしてオシマイにします

gulpfile.coffee

requireDir = require 'require-dir'
requireDir "./gulp/tasks", { recurse: true }

これだけ

pathをまとめる

次にpathとかをまとめておくためにgulp/config.coffeeを作ります。

config.coffee

path =
  src:
    jade: './source/views'
    stylus: './source/assets/stylus'
    coffee: './source/assets/coffee'
  dest:
    html: './build/views'
    css: './build/assets/css'
    js: 'build/assets/js'


module.exports =
  path: path

こんな感じにしてみました。

taskを作っていく

gulp/tasksにtaskを作っていきます。
例えばjade.coffeeを作ってみましょう

jade.coffee

gulp = require 'gulp'
jade = require 'jade'
gulpJade = require 'gulp-jade'
config = require '../config'

gulp.task 'jade', () ->
  gulp.src ["#{config.path.src.jade}/**/!(_)*.jade"]
    .pipe gulpJade
      jade: jade
      pretty: true
    .pipe gulp.dest "#{config.path.dest.html}"

いつもどおりですね。
強いて違いを見つけるならconfigをrequireしてることくらいです。

プロジェクト内でルールを作っておけばどう分けても結構です。
僕は以下のようにコロン繋ぎでタスク名を登録して子タスクみたいなものを作るなどもよく利用します。

clean.coffee

gulp = require 'gulp'
clean = require 'gulp-clean'
runSequence = require 'run-sequence'
config = require '../config'

gulp.task 'clean:html', () ->
  gulp.src "#{config.path.dest.html}/**/*.html"
    .pipe clean()

gulp.task 'clean:css', () ->
  gulp.src "#{config.path.dest.css}/**/*.css*"
    .pipe clean()

gulp.task 'clean:js', () ->
  gulp.src "#{config.path.dest.js}/**/*.js*"
    .pipe clean()

gulp.task 'clean', (callback) ->
  runSequence(
    ['clean:html', 'clean:css', 'clean:js'],
    callback
    )

とりあえずサンプルをgithubにおいておきました
https://github.com/KazIgu/gulp-sample

まとめ

gulp可愛い