FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.3 How to Handle Errors in Gulp

In this lesson you’re going to learn how to handle errors in Gulp.

This is an important step because, if not handled properly, errors will usually break the pipes and stop your tasks altogether. Let’s see how we can prevent that.

Related Links

6.3 How to Handle Errors in Gulp

Hello, and welcome back to this course. In this final lesson, you're going to learn how to handle errors in Gulp. And this is very important, because if not handled correctly, these will usually break the pipes and stop your tasks all together. So it's really important that we learn how to deal with that. To give you an example, I'm gonna start the Gulp server here, if I can type properly. All right, and right now Gulp is watching the files for changes. But watch what happens if I open up my styles.css and I make one tiny mistake. I use a variable, a Sass variable that doesn't exist. So I'm gonna save this, and watch what happens. It's starting the sass function, but it throws an error, unhandled error event, and it just exits completely. It stops the browser sync, it stops the server tasks, and it doesn't do anything else. So we need a way to prevent that. That way comes in the form of a plugin called Plummer. That's a very suggestive name. So I'm gonna install, npm install gulp-plumber. And also a plugin called gulp-notify. And this will allow us to create notifications that will show up in our operating system. Very, very handy. All right, so once installed, let us go ahead and load them right here, just like that. And let's fix our Sass problem. So the way this works is that you have to initialize plumber at the start of your piping process, right? So right after src, you would pipe this through plumber, and then you would execute, or you would pipe, like you would normally. Now, inside plumber, we're gonna type errorHandler. Basically we're telling plumber how to handle eventual or potential errors. And we're gonna use the notify plugin. And we're gonna say that on error the plugin will show a notification with the following title. This is of course, customizable. In my case I'm gonna say, "Gulp error in the". And then you can use some placeholders to gain information about the plugin. And those placeholders look something like this. So you would start with a pair of tags, then a pair of percentage signs, and then equal. And inside you'd say, error.plugin. And then the message will be, we're gonna use the same placeholder, only instead of error.plugin, we're gonna say error.message. And that's it really, that's all you need to do. You start the plumber before all the other plugins, and you specify an erro handler. You basically tell it to what to do in case of an error. So now, if we're gonna run, let me change this back. If we're gonna run Gulp again. And we're gonna do the same change, and we're gonna save. Yeah, it notifies me on my OS. You can't actually see it because it's off-screen right now. And it also shows me a notification right here. It says undefined variable: 'body-color1'. But this didn't actually break the pipe, it's still running. I can still make changes to my files here, and it's still watching, it's still executing tasks. That's the beauty of plumber, it prevents pipes from breaking, basically. Now this works with any type of file, really. It doesn't necessarily have to be Sass or CSS. You can apply it to Javascript for example, it's gonna work. Anything that requires error handling, plumber, is your go-to plugin. So that's a very simple way of handling errors in Gulp. Thank you very much for watching this course. This is the entire workflow. I hope you enjoyed it. I hope you learned something new and you find this useful. Please join me in the next video for the conclusion, thanks.

Back to the top