First off we should probably explain what Gulp is:
So what benefits does Gulp give us?
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.
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.
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.
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.
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.