Scaffolding with Yeoman
(and friends)

We'll Learn How to...

Scaffold an app using only a few commands with Yeoman
- Why? To save time / effort / energy
Use Gulp to automate tasks
- Live reload, minification, compilation, etc.
Customize a Sass file

What's Yeoman?

Yeoman is a command line tool that allows us to easily build web applications.

We'll be using it in conjunction with a few other tools as a part of our development toolchain.

http://yeoman.io

Our Tools

Yeoman (Scaffolding tool)
Gulp (Build tool)
Bower and npm (Package managers)

First Things First

$ npm install -g yo bower gulp

Before we get started we'll need to ensure we have our tools installed.

Assuming you already have npm, run the following command to grab Yeoman, Bower & Gulp. If you have one or more of these, only install the ones you don't have.

Run Yo

// install generator
$ npm install -g generator-gulp-webapp

// create a new directory
$ mkdir aaa-yo
$ cd aaa-yo

// verify that the generator exists
$ yo --help

// generate a new app
$ yo gulp-webapp

Now we'll create a home for our application, make sure we're inside that folder and then run the yo command.

Follow the Prompts

I selected Bootstrap, Sass and Modernizr. "Y" to libsass!

Build + Deploy

The build may take a while because of all the awesome happening behind the scenes (we'll get to that shortly). In the end you'll have a fully scaffolded web app!

$ gulp serve

To start the server run:

Your app should open automatically in a browser window at localhost:9000

File Structure

Let's peak into a few files and folders inside our shiny new application.

App

app: a parent directory for our web application

index.html: the base html file for our app
favicon.ico, and robots.txt: commonly used web files so you don’t have to create them yourself
scripts:
- main.js: our main application JavaScript code
styles:
- main.scss: our Sass file

Dependencies

bower_components, bower.json: our JavaScript/web dependencies, installed by Bower

gulpfile.js, package.json, and node_modules: configuration and dependencies required by our gulp tasks

Live Reload

This might be my favorite part of Yeoman's generated goodies.

Live reload allows us to make changes to any of our app files and automatically see updates on localhost WITHOUT refreshing the page.

Try it

To see live reload in action make a small change in the stylesheet and save it.

/* app/styles/main.scss */

body {
  padding-top: 20px;
  padding-bottom: 20px;
  background: black;
}

Then take a look at your terminal window. Your app compiles automatically.

Now open take a look in the browser.

Scaffolding with Yeoman ​(and friends)