【Gulp4】gulpタスクをループで作成、まとめて実行する。

やりたかったこと

開発ディレクトリ内のJavaScriptファイルをディレクトリに振り分けてコピーしたい。

開発ディレクトリdev内にJSファイルを配置。

dev
└── js
    ├── hoge.js
    ├── fuga.js
    └── piyo.js

出力時はa、b、cのディレクトリに必要なJSファイルをコピーする。

htdocs
├── a
│   └── js
│       ├── hoge.js
│       └── fuga.js
├── b
│   └── js
│       ├── hoge.js
│       └── piyo.js
└── c
    └── js
        └── fuga.js

モジュールを使用しない方法

gulpfile.js

// 各ディレクトリに振り分けたいファイルリスト
const fileList = {
  a: ['hoge', 'fuga'],
  b: ['hoge', 'piyo'],
  c: ['fuga']
}

const scriptTasks = {}
Object.keys(fileList).forEach(dirName => {
  // ファイル名にパスを付けて配列にする
  const files = fileList[dirName].map(fileName => { return './dev/js/' + fileName + '.js' } )
  // gulpタスクを作成
  scriptTasks[dirName] = () => {
    return src(files)
    .pipe(dest('./htdocs/' + dirName + '/js/'))
  }
})

// scriptTasksに入れたタスク全てを並列実行
exports.script = parallel(Object.keys(scriptTasks).map( key => { return scriptTasks[key] }))

モジュールevent-streamを使う方法

event-streamでストリームをマージするやり方。
マージされたタスクができるので、実行時の余分な記述が必要なくなる。

gulpfile.js

const eventStream = require('event-stream')

const scriptMergeTask = done => {
  eventStream.merge(
    Object.keys(fileList).map(dirName => {
      const files = fileList[dirName].map(fileName => { return './dev/js/' + fileName + '.js' } )
      return src(files)
      .pipe(dest('./htdocs/' + dirName + '/js/'))
    })
  )
  done()
}
exports.script = scriptMergeTask

参考

ループを使用してタスクを作成する[gulp]
gulp.js:forEachループに基づくタスク