Front-end Process - Flat Builds and Automation, Part 2: Environment Setup & Yeoman
Matt Bailey / +Matt / June 12, 2013

yeoman logo

In part one we discussed what a flat build is and why use it. In this second part I will outline how to set up your dev environment, and how to scaffold a project using Yeoman.

Step 1 - Set up your working environment

First of all you will need to install node.js, Git, Ruby and Compass globally on your computer (installation instructions can be found on each of the websites).

Notes:

  • Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.
  • Git is a free and open source distributed version control system.
  • Ruby is a dynamic, open source programming language with a focus on simplicity and productivity.
  • Compass is an open-source CSS Authoring Framework.

Step 2 - Install Yeoman

Install Yeoman globally by opening your terminal and running:

npm install-g yo grunt-cli bower

Notes:

Yeoman forms the backbone of the automated process and is comprised of three tools: Yo (the scaffolding tool), Grunt (the build tool) and Bower (for package management).

Step 3 - Scaffold your project

The easiest way to do this is by using Yeoman’s built-in webapp generator. In your terminal create a project folder, then navigate into it and follow this procedure:

  • Run: 'yo webapp'
  • Answer 'yes' or 'no' to the various options (such as “Would you like to include Twitter Bootstrap for Sass?”)
  • Then run 'bower install' (this will install any dependent packages)
  • Finally, to build your project for the first time (or at any other time) run 'grunt'
  • Or, to open your project in your browser and start watching it for changes run 'grunt server'

If you look in your project folder you should see a directory structure that looks like this (after you have run 'grunt' for the first time). For clarity I’ve shown only the folders, not the files:

myproject/
|-- .sass-cache/
|-- .tmp/
|-- app/
|   |-- components/
|   |-- images/
|   |-- scripts/
|   `-- styles/
|-- dist/
|   |-- components/
|   |-- images/
|   |-- scripts/
|   `-- styles/
|-- node_modules/
`--test/

Basically you should always work in the 'app' folder. When you build the project the 'dist' folder is created automatically - this is the folder that you should distribute; it’s a self-contained, compiled, minified and optimised version of your project - you won’t need any of the other files/folders located outside of it.

Now that we have scaffolded the project we can move on to Part 3, where I will show you how to install and configure some extra Grunt tasks.

Article Index