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 use the `gulp-inject` plugin to sanely and efficiently manage our file references with our HTML. Manually declaring JavaScript references will quickly get out of hand as your application grows in size and complexity. The `gulp-inject` plugin solves this problem by taking a stream of files, converting them into string references and then injecting those references into your HTML via annotations. 

[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.

Course

Angular Automation with Gulp

Angular Automation: Gulp Inject

Share this video with your friends