Gulp 4错误:以下任务未完成:您是否忘记发出异步完成信号？

Question

当使用isDev = false时，我得到了这个错误。这是我在gulpfile.js中的一部分

function CSSLoaders(isDev) {
    let loaders = []

    isDev ? loaders.push('vue-style-loader') : loaders.push(MiniCssExtractPlugin.loader)

    loaders.push({
        loader: 'css-loader',
        options: {
            url: false,
            sourceMap: isDev,
            importLoaders: isDev ? 1 : 2,
            modules: {
                localIdentName: "[local]"
            }
        }
    })

    if (!isDev) {
        loaders.push('postcss-loader')
        loaders.push({
            loader: 'string-replace-loader',
            options: {
                multiple: [...Array(100).fill({search: '../..', replace: ''})]
            }
        })
    }

    return loaders
}

function webpackConfig(isDev) {
    return {
        output: {
            filename: '[name].js'
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                // 'vue': 'vue/dist/vue.esm-bundler.js',
                'vue': 'vue/dist/vue.esm.js',
                // 'mixins-c': path.resolve(__dirname, '../../sass/_mixins-c.scss;')
            }
        },
        module: {
            rules: [
                {
                    test: /\.s[ac]ss$/i,
                    use: CSSLoaders(isDev)
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: '/node_modules/'
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new MiniCssExtractPlugin({
                filename: isDev ? 'css/[name].css' : 'skin/lightui/css/[name].css'
            }),
            // new cssoLoader(),
            new webpack.LoaderOptionsPlugin({
                minimize: true
            })
        ],
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    sourceMap: false,
                    uglifyOptions: {
                        warnings: false,
                        compress: true
                    }
                })
            ],
        },
        mode: isDev ? 'development' : 'production',
        devtool: isDev ? 'eval-source-map' : 'none'
    }
};

function js_build() {
    return src(['src/pages/**/js/*.js'])
        .pipe(named())
        .pipe(webpackStream(webpackConfig(false)))
        .pipe(dest('dist/js/'))
}

let build = gulp.series(js_build)
exports.build = build

我试过了

async function js_build() {
    return await src(['src/pages/**/js/*.js'])
        .pipe(named())
        .pipe(webpackStream(webpackConfig(false)))
        .pipe(dest('dist/js/'))
}

和

var print = require('gulp-print');

function js_build() {
    return src(['src/pages/**/js/*.js'])
        .pipe(named())
        .pipe(webpackStream(webpackConfig(false)))
        .pipe(dest('dist/js/'))
        .pipe(print.default(function() { return 'HTTP Server Started'; }));
}

但得到了相同的错误。我发现使用函数CSSLoaders()中的块可以解决这个问题：

    if (!isDev) {
        loaders.push('postcss-loader')
        loaders.push({
            loader: 'string-replace-loader',
            options: {
                multiple: [...Array(100).fill({search: '../..', replace: ''})]
            }
        })
    }

我不明白为什么我可以使用"css-loader“而不能"postcss-loader"，有什么区别？我应该把异步完成的标志放在哪里？有人能帮我理解我应该做什么吗？

Answer 1

使用回调和onEnd方法应该可以做到这一点。

function js_build(callback) {
    return src(['src/pages/**/js/*.js'])
        .pipe(named())
        .pipe(webpackStream(webpackConfig(false)))
        .pipe(dest('dist/js/'))
        .pipe(print.default(function() { return 'HTTP Server Started'; }))
        .on('end', function () {
            callback();
        });
}

这个问题的答案是：Gulp error: The following tasks did not complete: Did you forget to signal async completion?