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.
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.
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 recipe above, all the tasks are dependent on each other. You would use run-sequence to orchestrate non-dependent tasks.
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
Does the latest run-sequence not require a callback? Request: could you perhaps make an angular2 gulp tutorial?
@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!
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.
Thanks, Paul! Appreciate the kind words!
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
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!
Will a course like this come out for angular4/angular4cli ?
Why not using the built-in piping mechanism?