Gulp 4 error: The following tasks did not complete: Did you forget to signal async completion?

Question

I get this error when isDev = false . Here is my part of 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

I tried

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

and

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

But got the same error. I've found out that the problem disappear with block in function CSSLoaders():

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

I dont understand why i can use "css-loader" without mistakes and cannot "postcss-loader", what the difference? Where should i put the sign, that async is completed? Can anyone help me understand what i should do?

Answer 1

Using callback and onEnd method should do the trick.

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

This question was answer here: Gulp error: The following tasks did not complete: Did you forget to signal async completion?