Angular projects require automation. Period.
In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.
Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include production ready tools that you can start using in your applications today!
[00:02] Hello. Lukas Ruebbelke here. Welcome to the new series, where we are going to introduce build automation with Gulp. Gulp is a task runner, but I prefer to think of it as a commander of an army of robot helpers that take critical yet totally mundane tasks and perform them hundreds of times per day so we do not have to.
[00:22] This frees us up to focus on the important things, like writing code, testing, and basically not thinking about the tedium of having to package things up and ship it out the door. Automation is absolutely critical to any project of significant size.
[00:38] In this series, we will start by adding Gulp to the Eggly bookmarks application and then systematically add tasks so that by the time we are finished, we will have accomplished a few goals, the first goal being that changes to our source files will automatically be detected and a new build will be kicked off each time.
[01:19] We will take this a step further, when we want to kick off a production build, by concatenating our source files and then minifying and uglifying them, all the while keeping things safe by using ng-annotate. Let me give you just a quick demo to show you what we will end up with by the time we wrap us this series.
[02:10] Now I'm going to go up here and delete the bin and build directory. Then I'm going to hop into the command line and type "gulp." You can see that some various tasks ran. We are serving the project on port 3444.
[02:28] If I click up here, you can see that there is indeed now a build directory. We have injected a CSS file into the head of this page. Then, if we go down, we have a list of resources that we need to actually run Eggly.
[02:52] If we go into our app directory, we can see here that we've actually taken our HTML templates, converted them into strings, and then put them into our template cache as a loading optimization. We can also go into the browser. If we pull up the site on this port, you can see that it is running using express.
[04:08] Gulp is so powerful. The possibilities of the things that you can do in your application and the work that it can do for you is just about endless. It's just a phenomenal tool. I look forward to working through these in this series with you. I'll see you in the next lesson.
I would actually use bower for that.
If you mean how to automatically include them, well there are several ways to do that, actually.
gulp-usmin, gulp-inject, wiredep, all kinds of options, but it depends on your specific goal.