MODERN WORKFLOWS FOR MODERN WEBAPPS
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.
A complete getting started guide is available but for those looking to get up and running quickly, make sure you have installed Node.js, Git and optionally, Ruby and Compass (if you plan to use Compass).
Then install the required tools globally by running:
npm install -g yo
This will install Grunt and Bower automatically.
yo can generate several types of applications, but it needs help from plug-ins, or "generators" to get the job done. To scaffold a web application, you'll need to grab the web app generator:
npm install -g generator-webapp
Note: Many generators no longer require this installation step and will automatically install yo, grunt and bower just by installing the generator directly.
You can install additional generators with npm. For example, to install the AngularJS generator:
npm install -g generator-angular. Run
yo for more information.
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 # install generator 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.
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, 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.
A 5 Minute Introduction To Yeoman
We also have a video on scaffolding Bootstrap projects with Yeoman.
Tutorial: Building A WebApp With Yeoman
In this walkthrough we will author, build and deploy a complete application using the Yeoman workflow.
An Intro To Yeoman Sub-generators
NebraskaJS: An Intro To Yo, Grunt and Bower
Tooling fan Andrew Wirick talks about Yeoman, Yo, and Bower at the NebraskaJS meetup.