思い出したようにgulpのタスク分割をしました。

随分前に作ってから、新しいタスク考えたらgulpfileに書き足していくスタイルだったのですが、さすがに長くて見通しが悪くなってきたので分割しました。

確認した環境

• Node.js v5.6.0
• gulp.js
  • CLI version 3.8.11
  • Local version 3.9.1

分割作業

もともと空行を入れつつタスクを書いていたので塊は分かりやすかったので助かりました。（ありがとう過去の俺。

とりあえずそれぞれを別のファイルに分けて、require-dirというモジュールをインストールしました。

$ npm i --save-dev require-dir

※require-dir v0.3.0

これを読み込んで実行した箇所で各タスクを読み込んで実行してくれるみたいです。

なので、gulpfile.jsに以下のように記述しました。

var gulp     = require('gulp');
var requireDir = require('require-dir');

requireDir('./gulp/tasks', {recurse: true});

ファイル構造は以下のようになっていて、gulp/tasks/の中に各タスクのファイルをまとめています。

├── gulp/
│     ├── config.js
│     └── tasks/
├── gulpfile.js
└── source/
          ├── coffee
          ├── jade
          └── sass

configファイルの作成

タスク毎にファイルを分けたので、タスク単位での処理は見やすくなりましたが、案件によって違うであろうファイルのパスを修正するのが面倒になりました。

なので、configファイルで一括管理できるようにします。

例えばこんな感じ

gulp/config.js

module.exports ={
  source: {
    jade: 'source/jade/',
    sass: 'source/scss/',
    coffee: 'source/coffee/',
    js: 'source/js/'
  },
  dest: {
    html: './',
    css: 'assets/css/',
    js: 'assets/js/',
  }
};

あとは各タスクのファイルで以下のように記述するだけです。

gulp/tasks/sass/js

var gulp     = require('gulp');
var config   = require('../config');
var sass     = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src([
      config.source.sass + '**/*.scss',
      '!' + config.source.sass + '**/_*.scss'
    ])

これでパスの変更もファイル1つ編集するだけでOKになりました。

参考:

gulpタスクの分割 – Qiita

出来たものはGitHubにあがっているのでよければどうぞ

d-kusk/gulpfile