gulpタスクの分割

gulpで定形処理をタスク化していくと、スクリプトファイルにはすぐに肥大化します.

これを解消するのがrequire-dir. 公式サイト
指定したディレクトリ以下のJSやjsonを読み込んでくれるため、gulpタスクを独立したファイルに分割することができます.

別記事のgulpパッケージの一括ロードと併用すれば、グッとスクリプトファイルの見通しが良くなります.

---

記事を書くにあたり、動作するスクリプトファイルを編集して紹介しています.
万が一動作しない場合は、こちらのソースコードを参照してください.

インストール

npm install --save-dev require-dir

ファイル構成

.
+-- package.json
+-- gulpfile.js
+-- gulp/
    +-- config.js
    +-- tasks/
        +-- clean.js
        +-- copy.js
        +-- lint.js
              :

gulpfile.js

gulpfile.jsで、requireDirを呼び出してgulp/tasks/以下のタスクを読み込ませます.

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

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

config.js

config.jsで、各タスク用の設定を一元管理します.

var baseConfig = {
    sourceDir: 'src/'
  , publishDir: 'publish/'
};

module.exports = {
    /* 特別な定義が不要なタスクの設定 */
    simple: baseConfig,

    /* copyタスクの設定 */
    copy: {
        base: baseConfig

      , uglify: {}
      , minifyCss: {}
      , minifyHTML: {
            quotes: true
          , loose: true
      , }
      , imagemin: {
            optimizationLevel: 5
          , progressive: true
          , interlaced: true
        }
    }
};

gulpタスク

gulpタスクは、機能ごとに独立したファイルにするといいと思います.

単純なタスク

gulpタスクからrequire('../config').xxxの形式でconfig.jsを読み込みます.
このタスクでは、config.simpleを参照しています.

clean.js

var gulp = require('gulp');
var del = require('del');
var config = require('../config').simple;

gulp.task('clean', function() {
    del.sync([config.publishDir]);
});

複雑なタスク

外部からはcopyタスクとして呼び出されることを想定しています.
copyタスクは、copy-src, copy-lib, copy-licenseの３つのサブタスクを並列実行して、サブタスクの処理終了を待ち合わせてからタスクを終了させています.

このタスクでは、config.copyを参照しています.
uglifyやminifyCssには、config.copyで定義したパラメータを与えています.

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var runSequence = require('run-sequence');
var config = require('../config').copy;


gulp.task('copy', function(callback) {
    runSequence(
        ['copy-src', 'copy-lib', 'copy-license'],
        callback
    );
});

// src without lib
gulp.task('copy-src', function() {
    return gulp.src([config.base.sourceDir + '**/*'
              ,'!' + config.base.sourceDir + '**/*-sample'
              ,'!' + config.base.sourceDir + 'lib/**'])
        .pipe($.if('*.js', $.uglify(config.uglify).on('error', $.util.log)))
        .pipe($.if('*.css', $.minifyCss(config.minifyCss).on('error', $.util.log)))
        .pipe($.if('*.png', $.cache($.imagemin(config.imagemin).on('error', $.util.log))))
        .pipe(gulp.dest(config.base.publishDir));
});

// lib
gulp.task('copy-lib', function() {
    return gulp.src(config.base.sourceDir + 'lib/**/*')
        .pipe(gulp.dest(config.base.publishDir + '/lib'));
});

// license
gulp.task('copy-license', function() {
    return gulp.src(config.base.sourceDir + '../license.txt')
        .pipe(gulp.dest(config.base.publishDir + '/'));
});