Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Introduction to Grunt for Angular

2:19 Angular 1.x lesson by

Task automation is critical for any AngularJS single-page application. Grunt gets the job done.


egghead.io comment guidelines

Avatar
egghead.io

Task automation is critical for any AngularJS single-page application. Grunt gets the job done.

Avatar
Bharat

Hello Aaron,
This is a very nice series that you are working on. Is there any way that you can post your code so that we can follow along as you develop it in the next set of videos?
Thanks.
Bharat

In reply to egghead.io

Hey guys, welcome to the Egghead IO series on grand builds for any other projects. I had a couple of reasons I wanted to do this series.

There are a lot of people just getting into Angular for the first time and a lot of people who are getting into Grunt for the first time.

When you look at what it takes to get a solid JavaScript build, it takes a lot. There's a lot of ways to specifically customize those builds for Angular. I feel like it was too much for someone to take on without some guidance. I wanted to do this course, so that's where this course comes from.

We're going to start in a very simple place. We're going to start with a small Angular app that was written by my buddy, Dave Gettis.

The first steps in this series are going to be to install the necessary NPM packages.

Let's start by installing Grunt.

Prior to Grunt 0.4, you only installed Grunt once on a global level and that added Grunt to your path, so you could run it from any directory you're in. Starting with 0.4, going forward, there's two packages that we're going to need to install.

We'll start by installing global E, the Grunt command line and interface. We'll say, "NPM install-G Grunt CLI." This adds Grunt keyword to our path, so we can execute Grunt from whatever directory we want to on our computer.

The second command we'll run is NPM install Grunt, we'll use the "--" save dev flag, so that it adds our dependency into our package.json. The package.json is the file that NPM uses to stores its dependencies.

The next thing we'll need to do is create a Grunt file. Let's create a new job file called, "Gruntfile.js." The Gruntfile has three main pieces.

The first part is the part is the module.exports statement and then inside that, we've got the Grunt.initConfig statement and the Grunt registerTask statement.

In the following sections of this series, we're going to add new bits to the init.Config and to the registerTask statements. This will allow us to tell Grunt what to do and what order we want to do it in.

We're going to explore a few different coding styles that you can use when you're building projects with Angular.

By the end of this series, we're going to have a full-blown easily customizable Grunt build for our Angular project.

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