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 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.
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:
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.
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.
- 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.