gulp4でタスク分割

require-dirを使わなくても分割できるらしいのでやってみた。

gulpfile.jsと言うフォルダを作る

トランスパイラーを使用している場合はそれに応じた名前。

tree

gulpfile.babel.js
├── browsersync.js
├── config.js
├── css.js
├── index.js
├── javascript.js
└── watch.js

index.jsがgulpfile.jsの代わりになる

gulpfile.babel.js/index.js

import {series, parallel} from "gulp"

import {bs} from "./browsersync.js"
import {javascript} from "./javascript.js"
import {css} from "./css.js"
import {watch} from "./watch.js"

const build = parallel(javascript, css);
const develop = series(build, parallel(bs, watch));

export {
    bs,
    javascript,
    css,
    watch,
    build,
    develop as default
}

分割したファイルからexportsする

gulpfile.babel.js/browsersync.js

import {series} from "gulp"
import browserSync from "browser-sync"
import bsconfig from "../bs-config"
import { browserSync as config } from "./config"

Object.assign(bsconfig, config);

// browser-sync
const webserver = () => {
    browserSync.init(bsconfig);
}

export const bs = series(webserver);

とりあえず動いた。

できなかった事

• buildやdevelopのタスクも分割したい
• buildやdevelopのタスク内容をconfigに入れたい

他のやり方

registry()でもできるらしいのだけどうまくできなかった