This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular Automation: Gulp Tasks

3:45 Angular 1.x lesson by

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues using run-sequence.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues using run-sequence.

Avatar
Hedge

Why not using the built-in piping mechanism?

Avatar
Lukas

Good question! Gulp does a pretty good job synchronizing asynchronous dependent tasks when you provide the enough async tasks hints. Things get wonky when the tasks are non-dependent and so this is where run-sequence comes in. You can read more about here https://www.npmjs.com/package/run-sequence.

In reply to Hedge
Avatar
Hedge

Thanks. Found out many developers use this 'run-sequence' module. Though I'm still not sure how it's different from the gulp recipe described here:
running-tasks-in-series.md
I mean - what situation does it solve?

In reply to Lukas
Avatar
Lukas

In recipe above, all the tasks are dependent on each other. You would use run-sequence to orchestrate non-dependent tasks.

In reply to Hedge
Avatar
Hedge

Found it:

The built-in task dependency functionality does not solve this scenario. Dependent tasks are always run: there's no built in way to run two tasks in a row some of the time, but not every time. run-sequence solves a critical piece of missing functionality in gulp.
by the dev of run-sequence himself

In reply to Hedge
Avatar
Scott

Does the latest run-sequence not require a callback? Request: could you perhaps make an angular2 gulp tutorial?

Avatar
Lukas

@Ryan, I believe that run-sequence still requires a callback (https://www.npmjs.com/package/run-sequence). Also, bear in mind that once Gulp 4.0 hits, there should no longer be a need for run-sequence (as stated by the authors themselves in the above link). As for a Gulp-Angular2 tutorial, that is a great suggestion that we will be adding to the queue!

In reply to Scott
Avatar
Paul

Your tutorials are fantastic Lukas. Not rushed and step by step. Keep up the good work. With some of the other trainers, I feel there's a rush to cram as much information as possible in as little time as possible. It would be interesting to know your WPM vs other trainers. They should aspire to you and John Lindquist. Actually, Ken Dodds is pretty good too.

In reply to Lukas
Avatar
Lukas

Thanks, Paul! Appreciate the kind words!

In reply to Paul
Avatar

Please pause after typing a command. The video cuts over quickly after you type a command and I find myself going back and pausing the video to see what the command was. I have been doing jQuery web 2.0 work for years and this new super heavy IDE platform set up is taking me a while to get used to. Your videos help but it seems there are assumptions of having prior knowledge about tools like npm and I am copying down the commands and the gulp scripting for reference. Is there any way to get a sample app or a text of the commands used in this course? I would rather have a static reference document and focus on listening than to constantly go back and pause and type my own notes. Thanks

Avatar
Lukas

Great feedback! I will try to be more mindful of my timing. As for the sample app, everything is in the Github repo. Hope that helps!

In reply to

In this lesson, we are going to examine how Gulp Task works. Gulp Task takes three parameters, the name of the task you are defining, an array of subtasks or dependencies that will be executed and completed before your main task is completed, as well as the function that defines the unit of work that's supposed to be done for that task.

Let's see how dependencies work. I am going to define a test called CopyBuild, and I'm going to define three subtasks that I want to be completed before CopyBuild is executed. We're going to call these copy assets, CopyAppJS and CopyVendorJS.

Let's go ahead and stub these tasks out. I'll start with CopyAssets, and we'll just leave the method for this task blank. We just need to actually see that it's executing and completing. So, we'll rename these other methods, CopyAppJS, let's hop down here, CopyVendorJS, and then let's hop into the command line and run Gulp CopyBuild.

Now, what you'll see is that the subtasks were started and finished, and then finally CopyBuild, the main task, was started and finished after the three subtasks completed. Occasionally, your subtask will still be running while your main task is trying to execute.

Because Gulp is asynchronous, this is a sometimes common scenario. One of the ways to solve this is using the run sequence plugins, so let's go ahead and install this. MPM install, save dev, run sequence. Now, let's hop in and define this in our Gulp file. So, run sequence, then we'll just require this plug-in.

Let's use RunSequence to call the CopyBuild task. Now, you will notice that the default task was started, but it was never finished. Because Gulp is a sequence, we have to give it some hints of when your task is completed. One of the ways to do this is to return a callback in the case of RunSequence.

So, let's run this again, and you can see that it was completed. Now, you can do this a few other ways that we'll get into in later lessons, but you can either return a stream or a promise as well. So, let's go ahead and define one more task called Build, and you can use RunSequence to actually define or sequence multiple task calls.

In this case, we are going to sequence the clean task, then the CopyBuild task, then we'll complete that with a callback. So, let's define clean, and we'll use our default task to call Build. Let's hop into the command line and call this. You can see, now, that BuildClean, then our subtask, and then everything finished with CopyBuild, build default.

So, this is how tasks work in Gulp. You define the name, the sub dependencies and then the actual unit of work while keeping in mind, you have to provide an asynchronous hint, and that's by either returning either a callback, a stream or a promise.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?