In this lesson, we are going to learn how to use 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.
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.
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.
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.