This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular Automation: Gulp Inject

5:10 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
liranviper

what do you use to make your terminal so colorful with those extra symbols?

In reply to egghead.io
Avatar
Lukas

I am using ZSH with Oh My ZSH which you can check out here http://ohmyz.sh/ Cheers!

In reply to liranviper
Avatar
Carlo

At this point I've a question about how you organize your app and files. Why don't you replicate into src the same structure you'll ultimately have into build. In other words, I can't see why the folder vendor is kept outside the folder src. In fact, how to you run your app in development, does it mean that you can run it only from the build folder?

In reply to egghead.io
Avatar
Lukas

Hi Carlo --

Generally, I develop from the src folder and serve from the build folder. When I am ready to package up my application, I compile it into a dist folder. The reason for this is that there is a gap between what you want to work with and what you want to serve to the browser i.e. using gulp-inject to handle your script tags instead of manually doing it by hand. You could easily combine these two directories into one but I find that separating them out gives me the granular control I want while providing an optimized environment for viewing the application and eventually distributing it.

In reply to Carlo

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?