Angular Automation: Introduction to Gulp

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

[00:59] This will include compiling our less into CSS, running JSHint to catch any Javascript errors that we may have incurred, compiling our HTML partials into a single Javascript file, injecting the proper resources into our index.html file, and then serving that build up with express and nodemon.

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

[01:41] We have the Eggly bookmark manager here. Let's take a quick look at the index.html file. You can see that we actually do not have a reference to a CSS file or any local Javascript files. All we have here in its place is these inject blocks. Notice that our styles are in less, in the less directory, and our templates are in the appropriate feature directory.

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

[03:14] Speaking of which, if I go back into here, let me just pull up this Javascript file here. Let me just do something silly, like take out a semicolon. You can see that the build was automatically kicked off, but if I scroll up here, I got an error or a prompt telling me that I was missing the semicolon. I'll go ahead and put this back. It automatically picks up on that change and kicks off a new build.

[03:44] Let's do one other thing real quick. If I go "gulp compile," it's going to kick off a production build. It's going to run all of the build tasks that we use to do the development build, but it's going to take it a step further by creating a single, concatenated Javascript file for us to work with.

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