Angular Automation: Gulp Tasks
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.
[00:00] 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.
[00:22] 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.
[00:41] 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.
[01:15] 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.
[01:33] 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.
[02:09] 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.
[02:36] 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.
[02:58] 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.
[03:26] 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.