Don’t have time to read this? Think again.

Grunt, Bower and Yeoman - a report into programs aiding automation and efficiency

A major talking point at this year’s Scotch on the Rocks (SOTR) was automation. As developers, our time is always in high demand so the more we can automate, the more time we have to design and develop. The vast majority of these tools run off of node.js, a platform for building scalable network programs. There are many programs built using node.js, the three I will be looking at here are Grunt, Bower and Yeoman.

What is Grunt?

Grunt is an extremely powerful task manager that can handle just about any day-to-day task in development. At time of writing, there are 2,943 plugins for it available with that number growing every day, all of which can help free up more time for development, design, video gaming, going to the pub, etc…The plugins discussed here are just the tip of the iceberg so I encourage you to go visit http://gruntjs.com/plugins and see what else is available, chances are you’ll leave with a few extra tools at your disposal.

One of my favourites is one we’ve been using for a while at mso.net, grunt-contrib-less. Less CSS is a powerful time saver, allowing you to create CSS file in a dynamic way using variables, functions and so on. The grunt plugin then compiles this into a standard CSS file that a browser can read. This cuts down front-end development massively, freeing up all that time previously spent changing that shade of blue to a slightly lighter one in your stylesheets. The alternate to Less is Sass, the difference and benefits of which are well documented on the web, but grunt will handle whichever you should choose.

Another favourite already in use at mso.net is grunt-contrib-jshint, this plugin will validate your Javascript as soon as you hit save. Great for correcting those common mistakes and typos without having to reload your browser.

Speaking of which, a plugin I’m very keen to get to grips with is grunt-browser-sync. As soon as you hit save in your IDE, browser sync will update any browser you have open, including mobile Safari. You can even set browser sync to inject your new code right into the page rather than reloading it. This might sound like a small win, but you could have every browser you are developing for open at once, and see your changes in each one without even having to move your mouse.

Automation isn’t just about saving time while coding, it can help with testing too. By creating unit tests you can not only have more confidence in your build but also free up that time spent supporting it for years to come. The Jasmine plugin for Grunt, grunt-contrib-jasmine, allows you to do just that.

Below are a couple more notable plugins:

grunt-contrib-qunit – alternative option for unit testing.
grunt-contrib-imagemin – give it an image source and a destination and it will remove the metadata from images, reducing the file save and save some load time.
grunt-responsive-images – resizes your images for use with responsive sites.
grunt-montage – can configure sprites automatically from within Grunt.
grunt-devperf – displays performance metrics and warnings for things you should optimise.

What about Bower?

Bower is a package manager that allows easy installation of packages into your build. The great thing about Bower for me is that it handles dependencies. Let’s say you have a new build that is a responsive design, so you decide to use Bootstrap. Install that using Bower and it will also go off and grab jQuery for you too. For setting up a new project this can be a massive time saver. Like Grunt, Bower has a huge list of available packages so it’s worth visiting http://bower.io/ and seeing what it can do.

And Yeoman?

Yeoman is a scaffolding tool, basically it will give you the bare bones (called generators) of what you need, so you can jump right into your next project. Not only that, but it will even configure Grunt and Bower for you too. Again, there are hundreds of these generators but whether you want to build a site using Ember or are creating an extension for Chrome, Yeoman will get you up and running in no time.

These great packages for node.js really are just a drop in the ocean but use these on your next project and you’ll be moving along in no time. For additional reading I highly recommend taking a look at the presentations given by Matt Gifford (http://monkeh.me/aeqxy), Kitt Hodsden (ki.tt/sotr) and Rob Dudley (http://j.mp/RCWDSOTR14). That might feel like a lot of reading, but hey, you’ve got the time now right?

If you liked reading this article you may also like:

Sustainability – It doesn’t end at the vehicle Years ago, the words 'sustainable' and 'motorsport' wouldn't have even been uttered in the same sentence. Now, the industry has kicked it up a gear, reducing their reliance on carbon. But how can digital sustainability be achieved with your motorsport website? Encouraging millennial participation in sport Millennials enjoy sports just as much as any other generation, it’s how they consume it that matters. So how can the sports industry get this generation out of their homes and into their stadiums? Tackling rising costs with your business website All small-medium sized businesses across the country are facing the challenge of rising costs. In this infographic, we outline the financial benefits of utilising WordPress over an agency-built website technology.