Concatenate, minify, embed, serve.

Posted in: Development

Building a modern website which also performs well is hard. The amount of JavaScript and CSS we add to our pages is going up, but we still need to keep them loading quickly.

Tools like Grunt and Gulp help us manage these expectations by automating some of the hard work, and so it was that the development team spent Thursday in Bath's co-working hub, The Guild, learning about how to make best use of these tools from University of Bath alumni Jack Franklin and Ollie Jennings.

In the past we've used a similar tool for automating some of the hard work of managing and deploying back-end applications, so we were really interested in getting an in-depth look at tools designed for doing the same thing for the front-end bits of our sites.

Grunt and Gulp are both JavaScript-based build tools. They do pretty much the same job as one another, but with a different approach to task processing (Grunt is a synchronous build tool, Gulp is asynchronous), and using a different syntax.

Using either of the two it is trivial to convert SASS to CSS, concatenate your JS and CSS, minify them and then automatically add all your JS and CSS to your HTML in specific locations.

The session learning about the two tools was excellent, with everyone in the team learning lots, and it's likely that we'll soon start working with Grunt on packaging up and delivering our front-end assets!

Posted in: Development