Angular Automation: Gulp Inject

[00:00] In this lesson, we are going to learn how to sanely and efficiently manage our CSS and JavaScript references within our HTML files using GulpInject. If we look into the bottom of our index.html file, we will see that we have about eight JavaScript files that we have mainly defined within our script tags.

[00:23] This is fine at eight files, but what happens if we had 40 or 50 files? This would become very painful and unmanageable, as we try to manually reference each one of these and keep these in order, as well as we have a CSS file, but this could expand out to multiple style sheets, as well.

[00:42] This is where GulpInject comes in very nicely. It will take a stream of files, convert them into strings, and then, inject those references into our HTML using annotations. And so, the first step to working with GulpInject is to install the MPM package, we'll hop into the command line and MPM install, GulpInject, save dev.

[01:16] Now that this is installed, we will define it in our Gulp files so that it is available to us. And now, we are going to add a new task to our build sequence called "Index," and this task is going to be responsible for taking our index.html file and transforming it with references from GulpInject.

[01:52] We are going to return a Gulp stream here, and we'll start off by pointing it to the index.html file, and then, we'll pipe that output into the inject plugin. I'm going to use GulpSource, and use a variable here, TemplateSource, which I'll defined in just a second, and then we are using IgnorePath Build.

[02:21] When we actually inject this into our HTML, we do not want to reference the build directory. Now, TemplateSource is going to take an array of file path definitions, and so, we want to grab the vendor files, the JavaScript files within our app directory, as well as our CSS. We will eventually refactor this into a Gulp config file, but for now, we'll go with a local variable.

[02:51] Then, we're going to take this transformed index.html file, and we're just going to pipe this into the build directory using the Gulp destination task. We are taking the index.html file, transforming it with inject, then, putting that new file into the build directory.

[03:18] We have one more step that we need to take. Let's go ahead and delete the CSS reference, and let's add an annotation, so we're going to use inject:CSS, and then end inject, this will say where we want to start the injection, where we want to end it.

[03:34] Let's also delete our JavaScript preferences, and we will add one more annotation here. It will be inject:JS. Then, we'll complete this annotation, and let's hop into the command line and see this in action.

[03:55] The task is completed, if we go into our build director, let's take a look at the index.html file. You can see here, we picked up two CSS files, and then, if we scroll to the bottom, our vendor and application JavaScript files were injected into the index.html page.

[04:15] At this point, we can actually start to serve our application out of the build directory. Using the Serve MPM package, we can go to 3,000, and you can see now that we can render the application out of this directory.

[04:33] Let's do a quick recap of what we've covered, we have grabbed the index.html file using GulpSource. We've piped that into the inject plugin, and then, we've taken that transform file and pushed it into the build directory.

[04:50] Then, we have removed our CSS JavaScript references, and using this inject:JS or inject:CSS annotations, we have told GulpInject where we want to put our references. That is how we manage files and references within your HTML, using GulpInject.