Super Quick Start Guide for Yeoman, Grunt and Bower

http://otaqui.com/blog/1594/the-super-quick-start-guide-to-yeoman-grunt-and-bower/

This guide is for web developers who know what they are doing, but haven't tried using Yeoman 1.0. It seemed to me that the documentation was lacking a really straightforward "just do this" kind of guide, so I wrote one.

Here it is, repeated in full

The Super Quick Start Guide to Yeoman, Grunt and Bower
Posted July 2, 2013 by pete & filed under Professional.

Yeoman is a fantastic tool for giving you a standardised, thought out, useful project structure for html and javascript applications.

The only thing I think it lacks is a really straightforward quickstart guide for new users, hence this blog post.

Step 0: Requirements

Yeoman may not work or have more trouble running in Windows. Get yourself a Linux Virtual Machine, at once, and do all the following steps inside there.

Step 1: Get Node / NPM

You will need to install NodeJS in a manner suitable for your platform. This should (hopefully) come with NPM as well, or if you not you will also need to install that.

Step 2: Install yeoman, grunt and bower

Note that the yeoman package is called “yo” and the grunt package is called “grunt-cli”.

$ npm install -g yo grunt-cli bower

Step 3: Get the generator(s) of your choice

Yeoman uses “generators” to actually create project setups. The “standard” one is called “generator-webapp” but there are many others you may want to look at.

Find project generators like this (unfortunately not necessarily namespaced in any way with “yeoman”, so you will get false positives):

$ npm search generator

Note that throughout 2013, yeoman underwent significant changes, so if a generator package hasn’t been updated since March or April of 2013, you may want to avoid it.

To get the standard “webapp” generator you want to do this:

$ npm install -g generator-webapp

You can always install another generator, for example for Backbone or AngularJS, if you want to start a project with those frameworks.

Step 4: Create your project

Create your project directory, and then run the generator to create all the files and folders you need to get started. In this case I’ve used the standard webapp-generator, which is invoked with the name “webapp”.

$ mkdir ~/projects/frabulator
$ cd ~/projects/frabulator
$ yo webapp

Lots of the generators will ask you some questions about exactly what features you want or need. You can always tweak this stuff later, but it’s worth getting it right if you can, this is all about making things quick and easy!

Step 5 … there is no Step 5

That’s it. You should see lots of stuff is created in the directory, and your project is set up and ready to go. But what does that mean?

From here on in, you will be using grunt (mostly) and bower (occasionally). You can use bower to install any new dependencies you might want, for example “howler” if you want to use that for web audio.

$ bower install howler

Far more often though, you will be using grunt to serve (with live reload!), test and build your application. The following three commands are the most common things you will do from here on in:

$ grunt server
# ... this will launch a webserver on port 9000 (by default),
# ... it will launch the index in your browser, and will live
# ... reload if you save changes to some project files
$ grunt test
# ... this will  run your test suite.  Exactly what this
# ... means depends on your app, and the generator you
# ... used, but generally it will run in a headless webkit
# ... "phantom" browser
$ grunt build
# ... run the tests and package your app for distribution,
# ... in 'dist/'

There are more grunt commands built in. To get an idea, you can refer to the Gruntfile.js that your generator created for you, and obviously the Grunt.js documentation.