FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 How to Run Tasks in Sequence (Not Parallel)

By default, Gulp runs its tasks in parallel, meaning all of them at once. But there are certain situations where executing a task depends on another one being finished first. So what do you do then?

In this case, you can use a plugin called “run-sequence” to tell Gulp the order in which the tasks should be executed.

Related Links

6.1 How to Run Tasks in Sequence (Not Parallel)

Hello and welcome back to this course. In this lesson, you are going to learn how to run tasks in sequence. Now, by default, Gulp runs the tasks in parallel, meaning all of them at once, but there are certain situations where executing a task depends on another one being finished. So, what do you do then? Well, there are two possible solutions to this. The first one, is to wait for a Gulp 4.0. And Gulp 4 actually has a built in functionality for this, it's with a method called Series. So you would say Gulp.Series and then followed by a list of tasks. And they will be run in sequence. But since Gulp 4 is as far as I know still being developed, we're stuck with version 391. I believe this is the version we're using right now. So until that comes out, we need to find another solution. And that solution comes in a form of the plug in called run sequence. It's not the only one out there, but it's the one I've been using and it works just fine. So to install the plug in we're gonna say mpn install. Run, sequence. We are going to save that as a dependency. Just like we did at all of our other plug ins. And while that is installing, let me just show you how the package JSON looks so far. You can see all of the plugins that we've used listed right here and then we're gonna load that plugin. I'm gonna call it sequence. require('run-sequence');. So to use this plugin, we're gonna go to our default task, and instead of this big list of tasks that we need to execute, we're gonna run an anonymous function, with a call back and that organ as a sequence. And then the list of tasks that we want to write. So we're going to start with the HTML and then maybe the sprites and then the sass, image, and JavaScript can actually be run in parallel because they don't depend on one another. The reason I'm not executing sprites in parallel with image is because the image depends on the sprites being executed first, because we have that sprite.svg being generated. So in order in order to run tasks in parallel we just put them in an array like this. So sass, js, img, and then we have server. And, finally, we're gonna do cb, which is the callback for this function. So the way this works is the following. We launch default, and then we run html. As soon as this is finished, we run sprites. As soon as this one is finished, we run these three in parallel. Once all of these are finished, we will run the server. All right, so let's give this a try, let's do gulp. Yeah, and now this works flawlessly. And let's take a look in the terminal and see if everything was executed properly so we started the default function. Then started and finished html, started finished sprites, and then started SASS JS. Of course lint-js is executed first and then img. Here these are all started in parallel, and as soon as all of these are finished, we're starting the server, and then we're finishing the default and that's a very quick way of running tasks in sequence in Gulp. Now coming up in the next lesson, you're gonna learn how to rename, and also how to delete files and folders and that's coming up.

Back to the top