This AngularJS tutorial uses the Grunt app to build an Angularjs app. We're not
going to cover a lot of Angularjs territory - for that we'd recommend an
AngularJS tutorial from our series.
A Build System for AngularJS applications
files in a folder that is
served out by a local web server. In fact, it's fairly common for developers to simply put the
entire web folder under version control (typically 'git' these days), and
then simply pull updates into the web server's
web content folder.
There are a few problems with this approach. To start with, apparently a lot of developers
don't do it right, and
leave the '.git' folder exposed.
Apart from that, it turns out that in most cases, we would like to do some processing on
our web site or Single Page Application (SPA) source. For instance, we might want to
use a style sheet compiler like 'less' or 'sass' to make it easier to create cascadable style sheet
using the 'jasmine' behavioral testing framework.
All these things require us to use a more traditional software development approach, where we
have a 'source' tree that contains input files, and we use a build system to process this
source into an 'object' form that we can deploy to a production server.
This article will show you how to install and setup a build tool for your web projects. We'll use
a tool called 'yeoman' to setup the template AngularJS application. Although we're talking
about an AngularJS app here, 'yeoman' supports many different application types, and the
The Basics - Node.js and 'npm'
command line, either in a server environment or in your development environment
(in other words, not in a web browser). Many development apps, including the Grunt app, run under
In a short Grunt tutorial like this, we can barely scratch the surface of the possibilities
of Node.js, but if you look around the web, you'll find many many projects using the Grunt app
as their build system.
You can find instructions on how to install Node at (https://nodejs.org). You'll
need to install Node before continuing.
Yeoman is what's called a "scaffolding" tool. Essentially, it creates files for you,
either one at a time, or en masse. For instance, if we're working on an AngularJS
project, we can use Yeoman to create a basic starter set of files to establish the project,
and we can use it afterwards to create boiler-plate controllers or routes.
There is a huge library of so-called "generators" that we can install to generate
various artifacts using Yeoman's command line interface 'yo'.
We install Yeoman using the 'npm' package manager that came with Node.
$ sudo npm install -g yo
The Bower Package Manager
files in our target folder. For instance, AngularJS actually ships as a set of
angular ui components might also include css or html files. Managing all these files
will rapidly get complicated, especially when one package uses resources from another package.
To simplify this management, we'll use the 'Bower' package manager. We can install it
$ sudo npm install -g bower
Now, you may be thinking, "I already installed a package manager for Node, what's
with the other package manager?" The answer is that they're managing different sets of
packages. The Node package manager is dealing with the packages that we're running
during development using Node. Bower is going to handle packages that we'll ship with the
product for use at runtime in the browser.
Grunt Task Runner
Finally, the actual build tool, or "task runner" is 'Grunt.js'. We'll install that
using the npm package 'grunt-cli' (that's the Grunt command line interface).
$ sudo npm install -g grunt-cli
The AngularJS Generator for Yeoman
Yeoman can be used to generate many, many different types of projects and
scaffolding files. It does its work by calling one or more "generator" modules.
These generator modules are installed as Node packages, using 'npm'.
For this sample project, we're going to use the the official AngularJS generator, which is
$ sudo npm install -g generator-angular
Use Yeoman to create the project
Finally, now that we have all the tools that we need, we can go about creating the
First, create a project directory and cd into it.
$ mkdir great-app
$ cd great-app
Now let's invoke the angular generator. In the command line below, 'yo' invokes
Yeoman, 'angular' tells Yeoman that we want to run the generator for AngularJS, and
'great' is the name of the app we want to create.
$ yo angular great
You'll see some output, and 'yo' starts asking questions.
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`---------´ | ladies and gentlemen! |
( _´U`_ ) '--------------------------'
| ~ |
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
? Would you like to use Sass (with Compass)? (Y/n)
We're going to keep the generated app as simple as possible for now, so answer 'n' to the
question about using "Sass".
? Would you like to include Bootstrap? (Y/n)
Similarly, answer 'n' to using Bootsrap.
Yeoman will ask about a number of modules that could be added to AngularJS:
? Which modules would you like to include? (Press <space> to select)
Use the cursor keys and space bar to de-select all of these modules (again, we're trying
to keep it simple), and then press 'Return'.
After some output, you'll see a question about overwriting 'package.json'. This is
just a case of 'npm' being overly cautious - just hit return to accept the default
After a while, Yeoman finishes the job.
The Resulting Application folder
Let's have a look at what Yeoman built for us.
│ ├── 404.html
│ ├── favicon.ico
│ ├── images
│ ├── index.html
│ ├── robots.txt
│ ├── scripts
│ ├── styles
│ └── views
│ ├── angular
│ └── angular-mocks
│ ├── grunt
│ ├── grunt-angular-templates
│ ├── grunt-autoprefixer
│ ├── grunt-concurrent
│ ├── grunt-contrib-clean
│ ├── grunt-contrib-concat
│ ├── grunt-contrib-connect
│ ├── grunt-contrib-copy
│ ├── grunt-contrib-cssmin
│ ├── grunt-contrib-htmlmin
│ ├── grunt-contrib-imagemin
│ ├── grunt-contrib-jshint
│ ├── grunt-contrib-uglify
│ ├── grunt-contrib-watch
│ ├── grunt-filerev
│ ├── grunt-google-cdn
│ ├── grunt-karma
│ ├── grunt-newer
│ ├── grunt-ng-annotate
│ ├── grunt-svgmin
│ ├── grunt-usemin
│ ├── grunt-wiredep
│ ├── jasmine-core
│ ├── jit-grunt
│ ├── jshint-stylish
│ ├── karma
│ ├── karma-jasmine
│ ├── karma-phantomjs-launcher
│ ├── phantomjs
│ └── time-grunt
As we can see, there is a folder called 'app' that is meant to contain the
AngularJS application. As well, there's a file called 'Gruntfile.js' that contains the
configuration function for Grunt. The folder 'bower-components' contains the
packages that are installed using Bower, and the 'node_modules' folder contains the
Node modules that we installed, along with their dependencies.
So far, we've setup the infrastructure for using Yeoman to build a starting point for an
application, and we then used Yeoman to setup a template.
In Part 2 of this Grunt Tutorial, we'll explore the Gruntfile and then perform the
actual build. In the meantime,
don't forget to checkout the AngularJS tutorial