gulpのタスクを分割する

4616 ワード
gulp gulp4 gulp テキストリンク

gulpfile.jsにすべてのタスクを書くこともできますが、タスク毎にファイルを分割することもできます。

ディレクトリ構成

root/
  ├ gulpfile.js/
  │  ├ tasks/
  │  │  ├ task_a.js
  │  │  └ task_b.js
  │  └ index.js
  ├ node_modules
  └ package.json

タスクを書く

index.js
const { series } = require('gulp')
const { taskA } = require('./tasks/task_a')
const { taskB } = require('./tasks/task_b')

exports.default = series(taskA, taskB)
task_a.js
const taskA = done => {
  console.log('taskA')
  done()
}

exports.taskA = taskA
task_b.js
const taskB = done => {
  console.log('taskB')
  done()
}

exports.taskB = taskB

npm run gulpのコマンドでdefaultタスクを実行できるようにpackage.jsonにスクリプトを登録しておきます。

package.json
{
  ...
  "scripts": {
    "gulp": "gulp"
  }
  ...
}

実行

$ npm run gulp

[22:30:58] Starting 'default'...
[22:30:58] Starting 'taskA'...
taskA
[22:30:58] Finished 'taskA' after 32 ms
[22:30:58] Starting 'taskB'...
taskB
[22:30:58] Finished 'taskB' after 34 ms
[22:30:58] Finished 'default' after 88 ms

このように出力されれば成功です。