Grunt

Friday. August 11, 2017 - 1 min

Intro:

I like to minify my Javascript files, optimize the images and compress my CSS. All this seemed unachievable until I leaned about Grunt. Yes, Grunt helps us solve all the above problems by its own. Automation is cool, so is Grunt.

Grunt initially seemed intimidating to me, hence I chose to tackle the situation by reading the docs and other sources. As a matter of fact, I did use Grunt for achieving compression and optimization, which were essential to my website. The results were splendid.

Grunt minified 11 images and saved 331 kB which accounts to 20.8% of the size. Also, the various Javascript files were concatenated and minified to reduce the number of requests and size occupied. So the total size of files was reduced from 21.72 kB to 13.57 kB. The performance of the website has increased and the time required for loading the content has decreased by nearly 55%.

Its time to get hands dirty with code. I use Grunt on my Ubuntu 16.04 Linux distribution. Below are the steps I followed to get going with Grunt.

Setup:

What’s next:

There you go, congratulations, you have successfully installed Grunt. Now to accomplish tasks like minifying Javascript files, optimizing images, concatenating files etc., you need to install specific Grunt plugins.

Amogh Joshi

CS graduate student @ Stony Brook University