Alan Hay - Experienced Front End Developer and Designer - Based in Barnsley, South Yorkshire. Freelance when available.

29 May 14

Speeding up the front end workflow with Grunt

On a recent project, I had an existing site that needed a responsive facelift. I needed to work within an old Ruby on Rails app, that was very slow in terms of page refresh time when developing locally. So I wanted to speed up the page refresh within the old app, especially since the very nature of responsive stylesheets (SASS/SCSS partials) can take a while to compile in the first place. I was using Compass to compile the SASS/SCSS partials which didn’t really meet my needs at all in terms of speed. So I tried a different approach.


There has been much championing recently of front end tools such as Grunt (Javascript taskrunner), which is basically a task system into which you can add smaller tasks to help speed up the build of front ends for websites and applications. I trialled Grunt in our front end work flow. Primarily I used it to compile and minify SASS/SCSS partial files (using grunt-sass) and concatenating and minifying our javascript files (using grunt-contrib-concat). This speeded up the compilation times significantly, this is because grunt-sass uses libsass (a C++ sass compiler). But at the same time the page refresh time was still slow within the old rails app. I identified a grunt task called grunt-contrib-watch, which allows you to remove the page refresh when a change is made to the CSS/SASS files, and the CSS automatically updates in the background in what seems like less than a second. Compare this to 5 to 7 seconds when using the Compass compiler then you can see that this little timesaver is worth it’s weight in gold. Check out out my Grunt setup here. There are a plethora of tasks for Grunt, check them out here.