In this lesson, we are going to learn how to copy assets from one place to another using Gulp. This is important as you start to prepare your source files to be deployed into production. We will learn how to implement
gulp.dest as well as the del plugin as we copy our files from the source directory into a build directory.
In this lesson we are going to learn how to use gulp to copy assets from one place to another. This is important as you will want to start to delineate the assets that you are working with from the assets that actually get deployed into production. For instance, I like to work out of these source directory, but when I want to deploy to production I want to concatenate all my files together, minify them, and so on.
I will usually call this folder bin as you will see in later lessons. I also like to have an intermediary steps where I work out of source, but I preview my application by serving it out of the build directory. So we will start by creating a task to copy the vendor files into a build directory. I generally like to separate my vendor files from my source files, and so let's move that directory into the root of the project.
Now gulp works on the premise of pipes, in that it takes the output, or glob as they call it, from one task and pipe it into another. So we'll hop into the copy vendor task and we are going to return a gulp stream here, which is gulp source and we'll fill this out in just a minute, but then from here we are going to call the .pipe method and we'll put another unit of work into this method.
So let's go ahead and run copyvendor.js and you will see that it has created a build folder with a vendor directory and our UI router that directory. Using the same technique, let's go ahead and finish the copy assets and copyapp.js task. We'll go ahead and just paste the task that we defined in copyvendor.js, we'll just paste that in here, and we're just going to update our glob references and our outputs.
We're going to install this using npm, and then we'll hop up here and make this available to our gulp file, and then once we have defined this we can jump into our clean task and actually define the unit of work that we want to complete.
We'll call it delete, we will define what we want to delete, and we're going to set force to true, so we always want to delete this no matter what, and then we're going to return a callback to let gulp know that this task is completed. Now notice that anything using run sequence or delete is calling the callback to give gulp a hint that this asynchronous task is completed.
Whereas in our copy task, we are actually just returning a string, that's another way to let gulp know that the task is completed. Because we have composited all of our task into a top-level task which calls build, which calls clean and copybuild, we can just call gulp. So it's really powerful when you start to put these small specific tasks together to perform a larger unit of work.
As you can see, everything was moved over, and this is how you move assets from one place to another in gulp.