如何使用带有预定义任务的 gulp 4 将 css 注入 browserSync？

问题描述

我正在为自己写一个 automation tool，它的概念与 laravel mix 相似。我有一个小问题，在使用 Gulp 4 将 sass 注入浏览器同步时我无法破解。以下导出 brosersync 任务：

const argv = require('yargs').argv
const path = require('path')
const {watch,series} = require('gulp')
const webpack = require('webpack')
const bundler = webpack(webpackConfig)
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const Sass = require('./sass')

class BS {
    constructor() {
        this.watchPaths = [`${process.cwd()}/tailwind.config.js`]
        this.setupWatchPaths()
    }

    config() {
        let middleware = [
            webpackDevMiddleware(bundler,{
                publicPath: webpackConfig.output.publicPath,}),]

        if (argv.hot) {
            middleware.push(webpackHotMiddleware(bundler))
        }
        return {
            ...dev.bs,middleware,}
    }

    tasks(stream = false) {
        const tasks = []
        for (const conf of dev.sassConfigs) {
            const sasstask = new Sass(conf.src.segments.absolutePath,conf.dest.segments.absolutePath,conf.opts)
            tasks.push(() => stream
                ? sasstask.stream().setup()
                : sasstask.setup())
        }
        return tasks
    }

    setupWatchPaths() {
        for (const conf of dev.sassConfigs) {
            let watchPath = path.dirname(conf.src.segments.absolutePath)
            if (!this.watchPaths.includes(`${watchPath}/**/*.scss`)) {
                this.watchPaths.push(`${watchPath}/**/*.scss`)
            }
        }
    }

}

const bs = new BS()
const config = bs.config()

module.exports = cb => {
    browserSync.init(config)

    const task1 = () => bs.tasks(true)[0]()
    // task1 === () => (() => sasstask.stream().setup())()  --- returns gulp pipe
    const task2 = bs.tasks(true)[0]
    // task2 === () => sasstask.stream().setup() --- returns gulp pipe

    const conf = dev.sassConfigs[0]
    const task3 = () => (new Sass(conf.src.segments.absolutePath,conf.opts)).stream().setup()

    // Returns true
    console.log(JSON.stringify(task1()) === JSON.stringify(task2()))

    // -------------------------------------
    // Works
    // -------------------------------------
    watch(bs.watchPaths,series(task1))
    watch(bs.watchPaths,series(()=>bs.tasks(true)[0]()))
    watch(bs.watchPaths,series(()=> task3()))
    watch(bs.watchPaths,series(task3))

    // -------------------------------------
    // Doesn't
    // -------------------------------------
    watch(bs.watchPaths,series(task2))
    watch(bs.watchPaths,series(...bs.tasks(true)))
    watch(bs.watchPaths,series(() => task2()))

    cb()
}

如果您查看导出部分，task1 and task2 返回 gulp sass 管道，基本上是 task1 === () => sasstask.stream().setup() 和 task1 === () => (() => sasstask.stream().setup())() ，如果我传递 task1 信息 gulp watch 它确实将 css 样式表流式传输到browsersync，但如果我通过 task2 它不会。

为什么会这样？

我需要task2的原因是因为我想像这样破坏每一个任务，watch(bs.watchPaths,series(...bs.tasks(true))

解决方法

不明白为什么，但这就像魔法一样：

const argv = require('yargs').argv
const path = require('path')
const {watch,series} = require('gulp')
const webpack = require('webpack')
const bundler = webpack(webpackConfig)
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const Sass = require('./sass')

class BS {
    constructor() {
        this.watchPaths = [`${process.cwd()}/tailwind.config.js`]
        this.setupWatchPaths()
    }

    config() {
        let middleware = [
            webpackDevMiddleware(bundler,{
                publicPath: webpackConfig.output.publicPath,}),]

        if (argv.hot) {
            middleware.push(webpackHotMiddleware(bundler))
        }
        return {
            ...dev.bs,middleware,}
    }

    tasks(stream = false) {
        const tasks = []
        for (const conf of dev.sassConfigs) {
            tasks.push(() => {
                const sassTask = new Sass(conf.src.segments.absolutePath,conf.dest.segments.absolutePath,conf.opts)
                return stream
                    ? sassTask.stream().setup()
                    : sassTask.setup()
            })
        }
        return tasks
    }

    setupWatchPaths() {
        for (const conf of dev.sassConfigs) {
            let watchPath = path.dirname(conf.src.segments.absolutePath)
            if (!this.watchPaths.includes(`${watchPath}/**/*.scss`)) {
                this.watchPaths.push(`${watchPath}/**/*.scss`)
            }
        }
    }

}

const bs = new BS()

module.exports = () => {
    browserSync.init(bs.config())
    
    watch(bs.watchPaths,series(...bs.tasks(true)))
}