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

但是得到了同樣的錯誤。 我發現問題隨着 function 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 錯誤：以下任務未完成：您是否忘記發出異步完成信號？