Opening index.html in your editor of choice is not enough to start a development project these days. Doing web development in 2014 means working with libraries, preprocessors like SASS or HAML and optimisers that minimise and concatenate files to boost website performance. Yeoman, Bower and Grunt help you that you don’t get lost amidst all of these components.

If you happen to take a look at our Awesomeness framework for responsive design, you’ll notice that it bundles quite a lot of libraries: SASS and Susy for CSS; RequireJS, jQuery and Modernizr for Javascript and the icon library Font Awesome.

Yo, Awesomeness!

But with Yeoman and Bower, setting up a new Awesomeness project is a breeze despite all these dependencies. Just install the requirements and run this command:

$ yo awesomeness

It doesn’t just have a nice ring to it, it also saves you a lot of work. It executes the package generator-awesomeness which builds on Yeoman and scaffolds a new development project for you. That means, it copies all the needed files and directories, so you can start coding right away. To do that, Yo will first ask you how you want to call your project, e.g. awesome-project. This will generate the following directory structure:

awesome-project/
bower.json
bower_components/
dist/
node_modules/
package.json

awesome-project/ holds an example index.html to get you started and all the SASS-files you need to customise Awesomeness. The libraries used by Awesomeness are loaded into bower_components/. That’s the work of Bower, a package manager for the web. Much like gem or the Debian package manager, Bower knows most common (and obscure) libraries and their dependencies. So Bower won’t download a version of Modernizr that’s incompatible with your jQuery version. You can easily add new libraries with bower install NAME --save. The appendix --save saves the dependency in bower.json, so that your next bower update will correctly update it.

It’s served

Awesomeness builds on SASS, which means faster development time and better maintainability using features such as variables, inheritance and modular code. However, the SASS code has to be compiled before the browser can display it. This is where Grunt comes in:

$ grunt serve

This command starts the taskrunner Grunt, which can be compared to make or ant. It compiles the SASS code with compass to CSS, optimises HTML with htmlmin and then starts Browsersync. Browsersync is a handy extension for Grunt, that automatically opens a browser window with your Awesomeness project. All changes to HTML or SASS in awesome-project/ are now automatically processed in the background and directly injected into your browsing session. Changes appear without having to reload.

But Browsersync can do more. With multiple browsers (e.g. on different devices) accessing the same URL, it automatically syncs all interactions between them. For example, if you scroll in a desktop browser, your smartphone automatically scrolls with you. That saves a lot of time when doing crossbrowser or crossdevice testing.

If you want to work with your own web server instead, that’s fine, too. Just run grunt build and it will compile your code into the build-directory /dist.

Apart from Awesomeness there are hundreds of generators for Yeoman to choose from, from an AngularJS application to a WordPress widget. Combined with Bower and Grunt there is no more excuse for wasting time on downloading the latest libraries and manually setting up your file structure.