Angular Automation: Introduction to Gulp

Angular Automation: Installing Gulp Globally and Locally

Angular Automation: Gulp Tasks

Angular Automation: Copy Assets with Gulp

Angular Automation: Gulp Inject

Angular Automation: Gulp Serve

Angular Automation: Gulp Config

Angular Automation: Gulp Watch

Angular Automation with Gulp

In this lesson, we are going to learn how to create a config file to store common values so that we can reuse them multiple times in our `gulpfile.js`. As our `gulpfile.js` grows in complexity, we may find that we are introducing complex and multiple file path references. By creating a `gulp.config.js` file, we can simplify these references and make it easier to refactor and extend in the future. 

[00:01] In this lesson, we are going to learn how to use a configuration file to group common path files and variables within our gulp file so that we only have to declare them in a single place. For example, we have this templateSource variable here that has a path to a few different places that we're using when we build the index file.

[00:28] This is a great candidate to extract out to a configuration file. If we ever need to use it in another task, we do not have to re-declare this long variable of path names.

[00:42] We'll hop into the root directory of our application. We are going to create a gulp directory, and then we're going to create a gulpconfig file. Put it into this directory. Then, we are going to export a module that is simply going to be an object of properties.

[01:11] The first property we're going to declare is an appFiles property that will hold references to all the app files within our gulp file. We'll hop back over into our gulpfile.js. We'll chop out this templateSource variable. Let's go ahead and paste this in here. We'll clean this up.

[01:39] Now that it's declared within our gulpconfig file, let's hop back into our gulp file, and we will make this available by declaring a property called "Files." We will require the gulpconfig file that we created.

[02:00] From here, we can go back down to our index task, and we can replace this templateSource variable to point to the variable we declared in our gulpconfig file. This reads a lot better and is a little bit more concise, and it's easier to reuse this if we created a similar test that needed to use this file path.

[02:23] We will test it out by typing "gulp" into our command line, making sure that nothing has broken. Everything appears to be going well. Let's take this one step further to cement this concept. We're going to create a buildDirectory variable, and we'll point this to build.

[02:44] Within our gulp file, we are calling this gulp destination "build" quite often. What if we wanted to build it to somewhere else? Let's just replace this with files.buildDirectory. If we ever need to change that, then we just do it in one place, and everything will continue to work as normal.

[03:10] Let's test this out one more time. Everything appeared to work, but let's see what it looks like in the browser. Refresh the page, and all is well. This is how you use a gulpConfig file to streamline some of your development by abstracting out your common variables into a single place that you can then use over and over.

Course

Angular Automation with Gulp

Angular Automation: Gulp Config

Share this video with your friends