Angular Automation: Copy Assets with Gulp

[00:02] 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.

[00:26] 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.

[00:56] 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.

[01:28] So from here, our glob is simply going to be the vendor directory. We're going to use some wildcards here, ** to identify directories, single * for files, and we use .js to grab just the JavaScript files. We're going to take that output and we're going to pipe it into a destination using gulp.dest and we're going to pipe that into the build vendor folder.

[01:58] 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.

[02:37] So we'll grab everything from the assets folder and we're going to pipe it into the buildassets directory. Then in the app.js task, we're going to grab all of our JavaScript files in the source directory, and we're just going to pipe that into the build directory. Because we've defined all these tasks as dependencies for copybuild, when we call gulp.copybuild it will actually run all of these subtasks.

[03:16] So if we go into the build directory now, we can see that our JavaScript was copied over, our assets were copied over, as well as our vendor files. Now it's generally a good idea to start from a clean directory when you are moving files over, so we are going to use the delete plug-in to accomplish this.

[03:39] 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.

[04:07] 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.

[04:35] 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.

[05:06] As you can see, everything was moved over, and this is how you move assets from one place to another in gulp.