What about this combination of gulp -concat and lazypipe cause an error when using gulp 4?

Question

I upgrade from Gulp from 3 to 4, and I get an error:

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

I understand what he says, but cannot understand why this code runs it.

An error or not, the task is completed (files are combined and written to dest). Running the same code without lazypipe does not result in an error, and removing the concatenation inside lazypipe also fixes the error.

The wrapper of the whole thing in what creates the thread (like a merge thread) fixes the problem. I assume that something about the interaction between gulp -concat and lazypipe is preventing the flow from returning properly.

Here's a (simplified) task:

 gulp.task('build', function() { var dest = 'build'; var buildFiles = lazypipe() .pipe(plugins.concat, 'cat.js') // Task will complete if I remove this .pipe(gulp.dest, dest); // This works // return gulp.src(src('js/**/*.js')) // .pipe(plugins.concat('cat.js')) // .pipe(gulp.dest(dest)); // This doesn't (unless you wrap it in a stream-making function) return gulp.src(src('js/**/*.js')) .pipe(buildFiles()); }); 

Any advice appreciated!

Answer 1

This is a known issue when using lazypipe with gulp 4, and it will not be fixed in the near future. Quote from this problem:

OverZealous commented on December 20, 2015.
I'm not going to do lasippipp on gulp 4 at the moment.

As far as I can tell, this problem is caused by the fact that gulp 4 uses async-done , which has this to say about its thread support:

Note. Only actual streams are supported, not faux streams; Therefore, event-stream modules are not supported.

When you use lazypipe() as the last channel, you get a stream that does not have a lot of properties that you usually use when working with streams in gulp. You can see it yourself by registering the threads:

 // console output shows lots of properties console.log(gulp.src(src('js/**/*.js')) .pipe(plugins.concat('cat.js')) .pipe(gulp.dest(dest))); // console output shows much fewer properties console.log(gulp.src(src('js/**/*.js')) .pipe(buildFiles())); 

This is probably the reason why gulp considers the second thread to be a "fake thread" and does not detect when the thread is finished.

Your only option at the moment is a kind of workaround. The easiest workaround (which does not require additional packages) is to simply add the cb callback function to your task and listen for the 'end' event:

 gulp.task('build', function(cb) { var dest = 'build'; var buildFiles = lazypipe() .pipe(plugins.concat, 'cat.js') .pipe(gulp.dest, dest); gulp.src(src('js/**/*.js')) .pipe(buildFiles()) .on('end', cb); }); 

Alternatively, adding any .pipe() after buildFiles() should fix this, even one that actually does nothing gutil.noop()

 var gutil = require('gulp-util'); gulp.task('build', function() { var dest = 'build'; var buildFiles = lazypipe() .pipe(plugins.concat, 'cat.js') .pipe(gulp.dest, dest); return gulp.src(src('js/**/*.js')) .pipe(buildFiles()) .pipe(gutil.noop()); }); 

Answer 2

So the error is clear. I had to do some refactoring so that everything worked again for gulp 4. I ended up doing a few extra methods that take the source and destination and perform the tasks previously performed by my lazypipe implementation.

I have to say that I do not miss Lazypipe now. This is just a different approach. I ended up with some additional tasks, but they use a standard method, as in the example below:

 // previously a lazypipe, now just a method to return from a gulp4 task const _processJS = (sources, destination) => { return src(sources) .pipe(minify(...)) .pipe(uglify(...)) .pipe(obfuscate(...)) .pipe(whatever()) .pipe(dest(destination)); }; const jsTaskXStep1 = ()=>{ return src(...).pipe(...).pipe(...).pipe(dest(...)); }; const jsTaskXStep2 = ()=>{ return _processJS(['./src/js/x/**/*.js'], './dist/js'); }; const jsTaskYStep1 = ()=>{ return src(...).pipe(...).pipe(...).pipe(dest(...)); }; const jsTaskYStep2 = ()=>{ return _processJS(['./src/js/y/**/*.js'], './dist/js'); }; const jsTaskX = series(jsTaskXStep1, jsTaskXStep2); const jsTaskY = series(jsTaskYStep1, jsTaskYStep2); module.exports = { js: parallel(jsTaskX, jsTaskY), css: ..., widgets: ..., ... default: parallel(js, css, widgets, series(...), ...); } 

This way you can put your lenipipes into methods like _processJS in this example. And then create tasks that use this and combine everything with a sip series and parallel. Hope this helps some of you who are struggling with this.