yeoman

How To Use Yeoman

Posted on by Igor

Boilerplate code is great for speeding up work. Wouldn’t it be awesome if you could speed up the tasks you do repeatedly when you begin working on a project, like downloading the boilerplate frameworks and libraries associated with it.

There is just such a tool and it’s called Yeoman.

Improving Your Workflow With Yeoman

What Can Yeoman Do For You?

Besides being very polite, Yeoman will generate all the boilerplate files for many types of development projects you might want to start. Here’s a short list of supported frameworks and libraries:

What do you need on your machine?

To setup Yeoman you need to have the following:

  • Node.js
  • npm (comes with Node.js)
  • Git
  • Sass (for our example)

To check if you have everything, fire up your terminal and type the following:

In the terminal:

node -v
# should display a node version e.g. v0.10.21
npm -v
# should display your npm version e.g. 1.3.11
git --version
# should display your git version e.g. 1.8.3.4
compass -v
# should display your compass version e.g. 0.12.2

If you don’t have Node.js, you can download it here.

Installing Yeoman

To install Yeoman on your machine you will also need to have Grunt and Bower.

sudo npm install -g grunt-cli bower yo
# will ask for your root password

Once installed, we can search for the available application templates to find one we’d like to generate. I recommend you make your terminal window as wide for this:

In the terminal:

npm search yeoman-generator

You should see a long list of generators, and for our example we will install the one called generator-foundation-five

In the terminal:

sudo npm install -g generator-foundation-five

Creating our Zurb Foundation 5 project with Yeoman

To generate our application we will go to our projects folder and create the app directory. Then we’ll run yo foundation-five to generate the directories and boilerplate code for our project.

In the terminal:

cd /path/to/projects
# changed directory to your projects folder
mkdir yoapp
# created a directory for our new app
cd yoapp
# changed into our new app directory
yo foundation-five
# running the generator we installed earlier called generator-foundation-five

One last step, let’s run the bower install to pull in all the dependencies. This command is similar to bundle install if you are familiar with Ruby programming.

In the terminal:

bower install

Running the app

In the terminal:

grunt serve

If everything goes well, grunt will do three things:

  • Will run a server on your localhost:port_number
  • Will watch for any changes in the source files and compile them if necessary (e.g. from scss to css)
  • Will reload the page inside the browser when a change is detected

While grunt serve is running open the project files in your favorite code editor and hack away at the project. Watch the browser window reload on its own every time you make a change and save a file.

I hope you use this on your next project.