Yeoman, Grunt and Bower

I recently started working on a new web app, and instead of just cloning one of my previous efforts, I scanned the forums to see what sort of tools and templates are hot right now.  I’ve used the HTML5 Boilerplate as a template before, and there is nothing wrong with it, but I wondered whether there was a simple way to customise it for my needs.   That’s when I came across Yeoman – The web’s scaffolding tool for modern webapps.

yeoman

Yeoman not only generates a template for your web application or website, but also includes an entire front-end stack – a customised set of tools and frameworks for whatever kind of application you are building.  By default it includes Grunt (a build tool) and Bower (a package manager).  I had never used either of these before, but I have used build tools before, like Maven and Ant (with Java), and package managers like npm and Homebrew.  So I thought great, lets get started.

It all started off rather well… I had my new web app template generated within a few minutes by running Yeoman’s ‘yo’ command and picking the options I thought I wanted. Next I needed to configure Bower and Grunt…

grunt

Grunt is basically a Node.js task runner – you configure all the tasks you want it to perform inside your Gruntfile.js.  These can be tasks to validate your javascript code (jshint or jslint), minify or uglify it, concatenate it, run unit tests, run a server, precompile your css. The list is virtually endless, which is great, but the problem was that I found it quite a learning curve and it took me a couple of weeks to get it to a point where I could get on without breaking something.  Though to be fair, a large part of this effort was trying to set-up a proxy (grunt-connect-proxy) to get around my CORS issue.

bower

Like Grunt, Bower is also a Node.js command-line tool, but with the express purpose of managing packages for your project.  It will download them for you, install them, manage dependencies between them and tell your application where to find them.  And it keeps track of all of this in your bower.json file.  For this app I am only really using JQuery and JQuery Mobile so I didn’t spend too long playing around with Bower, apart from trying to remove some packages that were included and that I didn’t need.  So, I have yet to see the possible benefits.

Regarding Yeoman, I haven’t needed to go back to it since scaffolding the original template for my app, but I will certainly check it out again for the next one.  I might just be a bit more discriminating about the options I pick… and only pick what I know I need.  Grunt I have gotten to know a lot better now and will most definitely be using again.  I particularly like the live reload feature – so I don’t have to keep hitting the refresh button.  Bower, I probably need to try tinker with a bit more before I make up my mind.

It’s about the journey, not the destination.

Leave a Reply

Your email address will not be published. Required fields are marked *