Search code examples
gulpgulp-4

Using stream-combiner2 with Gulp 4


I'm trying to use stream-combiner2 with my Gulp 4 task, as advised in the current version of this recipe. However, I always receive:

The following tasks did not complete: build:js
Did you forget to signal async completion?

I've read the excellent information in this answer about Gulp 4 async completion, but I'm having trouble applying that in my task. Here's what I have:

const browserify = require('browserify')
const buffer = require('vinyl-buffer')
const combiner = require('stream-combiner2')
const gulp = require('gulp')
const jsDest = 'static/js'
const jsPath = 'build/js'
const jsSrc = `${jsPath}/**/*.js`
const source = require('vinyl-source-stream')
const sourcemaps = require('gulp-sourcemaps')
const uglify = require('gulp-uglify')

gulp.task('build:js', function () {
    const combined = combiner.obj([
        browserify({
        entries: `${jsPath}/main.js`,
        debug: true
        }),
        source(`${jsPath}/main.js`),
        buffer(),
        sourcemaps.init({ loadMaps: true }),
        uglify(),
        sourcemaps.write('./'),
        gulp.dest(jsDest)
    ])

    combined.on('error', console.error.bind(console))

    return combined
})

Solution

  • Somehow I missed this fantastic recipe for browserify with multiple sources and destinations. It allowed me to finally get what I was after, including well-formed error handling:

    const browserify = require('browserify')
    const buffer = require('gulp-buffer')
    const combiner = require('stream-combiner2')
    const gulp = require('gulp')
    const gutil = require('gulp-util')
    const jsDest = 'static/js'
    const jsSrc = 'build/js/*.js'
    const sourcemaps = require('gulp-sourcemaps')
    const tap = require('gulp-tap')
    const uglify = require('gulp-uglify')
    
    gulp.task('build:js', function () {
        const combined = combiner.obj([
            gulp.src(jsSrc, { read: false }),
            tap(function (file) {
                gutil.log('bundling ' + file.path)
                file.contents = browserify(file.path, { debug: true }).bundle()
            }),
            buffer(),
            sourcemaps.init({ loadMaps: true }),
            uglify(),
            sourcemaps.write('./'),
            gulp.dest(jsDest)
        ])
    
        combined.on('error', console.error.bind(console))
    
        return combined
    })