Yeoman

MODERN WORKFLOWS FOR MODERN WEBAPPS

Yo, Grunt, Bower

1.0 beta

Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.

Our workflow is comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

  • Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.

  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.

  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.

All three of these tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective.

Getting started

Installation

A complete getting started guide is available but for those looking to get up and running quickly. Make sure you have Node.js and Git installed (plus Ruby and Compass too if you plan to use it) then install the recommended tools by running:

npm install -g yo grunt-cli bower

This will install the recommended tools globally. For scaffolding, our web app generator comes bundled with yo. You can install additional generators with npm. For example to install the AngularJS generator, you do npm install -g generator-angular. Run yo for more info.

Usage

Run yo in your Terminal to see some help and get familiar with the tool.

Then you would want to scaffold out a new project. For this you use yo the scaffolder. It comes bundled with the webapp generator by default, which scaffolds out a skeleton front-end web app:

yo webapp

You may also want to install and use additional generators. This is done through npm. For example, to install the Angular generator with the required Karma generator one would run: npm install -g generator-angular generator-karma.

A complete workflow might look like this:

yo webapp                      # scaffold out a skeleton web app project
bower install underscore       # install a dependency for your project from Bower
grunt                          # build the application for deployment

Or with the AngularJS generator:

npm install -g generator-angular generator-karma  # install generators
yo angular                     # scaffold out a AngularJS project
bower install angular-ui       # install a dependency for your project from Bower
grunt test                     # test your app
grunt server                   # preview your app
grunt                          # build the application for deployment

Migrating from earlier versions

If you were previously using Yeoman 0.9.x, you may have noticed a few things have changed. A migration guide is available to help you move over to 1.0. We've also written up some of the reasons behind our move.

Contributing

We are more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests.

At this time we are primarily focusing on improving the user-experience and stability of Yeoman for our 1.0 beta release. Please keep this in mind when submitting feature requests, which we're happy to consider for future versions.

My features

  • Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), RequireJS and more.

  • Great build process — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, if you're using AMD, I will pass those modules through r.js so you don't have to.

  • Automatically compile CoffeeScript & Compass — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.

  • Automatically lint your scripts — All your scripts are automatically run against JSHint to ensure they're following language best-practices.

  • Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.

  • Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.

  • Killer package management — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser.

  • PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.

About

Yeoman is a project developed by Paul Irish, Addy Osmani, Sindre Sorhus, Mickael Daniel, Eric Bidelman, Frederick Ros, Brian Ford and the Yeoman Community.