Following on from our previous blog where we talked about the “emphasis on optimisation and process“ we had noticed at jQuery UK, in this blog we are going to take a look at how we have started using build system Gulp in our front-end process to help us achieve a number of goals.

First off we should probably explain what Gulp is:

Gulp is an automatic task runner, or build system, written in node.js (a technology we will cover in more detail another time), in simple terms it allows you to process files or “streams” and output the result. Because it is done via an intuitive JavaScript based API this means that for our front-end developers who are well-versed in JavaScript it all feels pretty familiar.

So what benefits does Gulp give us?

Optimisation

Two of the main stays of optimisation of front-end code stem from some pretty simple concepts. The smaller assets are, the quicker they will download and the less things there are to download, the quicker the site will load.

Firstly we can reduce the size of our files using various Gulp plugins. Minfying - essentially squeezing the code into the shortest space possible whilst still remaining functional - our CSS and JavaScript means the file size is drastically reduced, which means quicker downloads.

Another step in the minification process is combining media queries. We are big fans of The Guardian’s media query mixin for SASS, which allows us to nest media queries in a more intuitive way in our code. However, this can lead to scattered media queries in the outputted CSS but fear not, combine media queries to the rescue! This plugin effectively grabs all the media queries that are the same into one, which may not seem like a big deal but on a large site those savings can really add up.

Lastly we can concatenate all our CSS and JavaScript into the least number of files possible so there are fewer http requests, making the assets quicker to load.

Linting

Another use we have found useful is code linting. In basic terms code linting analyses code for potential errors, thus allowing you to find issues before they become big problems.

Two ways we have used this is by using the JS Hint plugin, and by using Parker. JS hint allows us to analyse out JavaScript code to keep it to a high standard by enforcing certain coding conventions and by spotting simple errors. Parker describes itself as “a stylesheet analysis tool.” It runs metrics on stylesheets and will report on their complexity, this means we can get a report on our stylesheets, providing a quick overview of its complexity. High scores can indicate overly complicated CSS that may take longer for the browser to process or that something in your sass file is generating a large amount of code.  

Watch Tasks

Another great advantage of having a build tool like Gulp is not only can you run these tasks manually, you can have them run automatically, for instance you can set your build tool to watch a folder then run all the tasks to create your CSS, JS from your source files and with the livereload plugin even have it refresh your browser.

Conclusion

In conclusion we have found build tools to be a welcome addition to our front-end process here at e3 and we are looking forward to finding more way to utilise them, including integrating them with our back end and deployment processes.

Ultimately automating these processes and ensuring the lowest page weight we can will benefit us by making the front-end process more efficient and ultimately ensure our client’s websites are as fast as we can possibly make them.

Find out more about our work here.