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

Introduction to Grunt for Angular

Host: [00:00] 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.

[00:07] 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.

[00:14] 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.

[00:29] 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.

[00:36] The first steps in this series are going to be to install the necessary NPM packages.

[00:42] Let's start by installing Grunt.

[00:44] Prior to Grunt 04, 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 04, going forward, there's two packages that we're going to need to install.

[00:58] 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.

[01:14] 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.

[01:32] 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.

[01:43] 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.

[01:54] 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.

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

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

Introduction to Grunt for Angular

Share this video with your friends