如何通过预定义任务使用 gulp 4 将 css 注入 browserSync？

Question

我正在写 automation tool for myself, which has similar concept to laravel mix. I have a tiny problem that I can't crack when injecting sass into browsersync using Gulp 4。以下导出 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.dest.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 return gulp sass 管道，基本上 task1 === () => sassTask.stream().setup() 和 task1 === () => (() => sassTask.stream().setup())() ，如果我传递 task1 信息 gulp watch 它确实将 css 样式表流式传输到 browsersync，但是如果我传递 task2 它不会。

为什么会这样？

我之所以需要task2是因为我想像这样销毁每个任务，watch(bs.watchPaths, series(...bs.tasks(true))

Answer 1

不明白为什么，但这就像魔术一样有效：

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)))
}

如何通过预定义任务使用 gulp 4 将 css 注入 browserSync？

How to inject css into browserSync using gulp 4 with predefined tasks?

node.js

gulp

gulp-sass

browser-sync