Grunt – Optimisation of Front End Code


After my adventures with Yeoman I have grown to love the quick scaffolding it offers, but through Yeoman you are introduced to Grunt a task runner for Javascript, which takes more of the pain out of repetitive tasks. Below I will comment on some of the most useful ways to use Grunt to optimise/fix front end code.

In this short post I will give a quick introduction to some of the ways you can improve the performance of your application using really quick and simple techniques.

Performance Optimisation

Below I will list some of the really easy things you can do to speed up your applications, with a little help from Grunt.

1. Folder Structure

This doesn’t have a direct effect on performance of your application, but will aid in making any changes that will. When working with existing or older projects this is often a problem. If your Web application has a ROOT/js folder that has lots of uncompressed development grade javascript files, think about creating a distribution folder for the LIVE version of the app (ie ROOT/dist/js). In here you can also create folders like images, css/styles where you can compress those assets.

2.Uglify

https://github.com/gruntjs/grunt-contrib-uglify

One of the first Grunt tasks that I used and probably the most useful. With Uglify you can point it to the folder that contains all your js files, Grunt will then go off minify them and write them to a chosen destination folder with your chosen extension.

For the minified versions I recommend having a common location for all compressed, production ready scripts/assets, It is helpful to separate the two locations as ideally you don’t want to be debugging minified js in dev environments. So this means you can alter the development grade scripts and have Grunt minify them for use in the application.

Question : Do I need to manually run the Grunt task to see my changes locally ?

Answer : No, There are multiple ways you can get around this, my favourite is by setting up a watcher. Watchers wait for changes on certain files (in this case the dev js) when a file is changed it can trigger a task (in this case Uglify), Using this method means every time you change the development JS its automatically compressed and written to the dist location.

So changing ROOT/js/app.js would create a compressed equivalent in ROOT/dist/js/app.min.js

Next Time – Setting up project for Grunt & Uglify

Advertisements