How to do proper error handling with Gulp? - gulp

Question

With Gulp it is pretty easy to orchestrate a build consisting of many little steps processed through a pipe.
One of the tasks in my current Gulp setup looks like this:
gulp.task("release-assets", ["angular-templates", "less-compile"], function() {
var assets = useref.assets();
var jsFilter = filter("**/*.js");
var moonwalkFilter = filter("**/" + MOONWALK_JS);
var cssFilter = filter("**/*.css");
return gulp.src("./Content/**/*.cshtml")
.pipe(assets) // Concatenate with gulp-useref
.pipe(jsFilter)
.pipe(ngAnnotate()) // Process javascript sources to add dependency injection annotations
.pipe(uglify()) // Minify javascript sources
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(less()) // Generate CSS from LESS
.pipe(cmq({ log: true })) // Combine matching media queries into one media query definition
.pipe(minifyCSS()) // Minify CSS sources
.pipe(cssFilter.restore())
.pipe(moonwalkFilter) // Filter the moonwalk.js source file, which is generated above by useref
.pipe(addsrc("Temp/" + TEMPLATES_JS))// Add the templates.js to the stream, which is generated by a seperate task
.pipe(order(["**/" + MOONWALK_JS, "*.js"]))// Order stream, so that templates.js is appended to moonwalk.js (needed, since templates depend on the angular module)
.pipe(concat(MOONWALK_JS))// Concat the existing moonwalk.js and the templates.js into moonwalk.js
.pipe(moonwalkFilter.restore())
.pipe(rev()) // Rename the concatenated files
.pipe(assets.restore())
.pipe(useref()) // Replace the original references in the cshtml with the concatenated and processed resources by usemin
.pipe(revReplace({replaceInExtensions:[".cshtml"]})) // Replace the usemin generated resources with the reved resources
.pipe(gulp.dest("Dist/"));
});
How do I do proper error handling in this task?
What I want:
- The build should fail if one of the dependencies of the task fails
- The build should fail and report an meaningful error fi one of the steps in this task produces an error.
As far as I gather, I have to care about error handling in the pipe/streams myself ... how do I do that?
Do I really have to include a on("error", errorHandler) after every step in the pipe?
Is there any documentation about error handling in Gulp?

Answer 1

Do I really have to include a on("error", errorHandler) after every step in the pipe?
Yes, unless you make use of a module that can merge all of these error events into a single one. Have a look at stream-combiner, which can do this. There's an example recipe in the gulp docs that references using this module to listen for errors in the pipe:
var combiner = require('stream-combiner2');
var uglify = require('gulp-uglify');
var gulp = require('gulp');
gulp.task('test', function() {
var combined = combiner.obj([
gulp.src('bootstrap/js/*.js'),
uglify(),
gulp.dest('public/bootstrap')
]);
// any errors in the above streams will get caught
// by this listener, instead of being thrown:
combined.on('error', console.error.bind(console));
return combined;
});
https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md
So, wrap your stream with combiner as in the example and you'll have a single error handler.