Why web developers and designers should use Grunt

Work smarter, not harder

The purpose of this post is to help people who are uneasy about using Grunt or other command line tools become aware on what they are missing out on. Chances are, there are a number of reason why you haven’t used these awesome tools that’ll make your life so much easier. I too, was hesitant to use unfamiliar tools, so I hope this post can help ease the transition into being a super efficient web developer/designer.

No knowledge of grunt or node.js is necessary to get something out of this post. If you’re familiar with these tools, you probably don’t even need to read this article. There’s nothing technical in this post, just persuasion points to try to help people to see that they should be working smarter, not harder.

This post if for you if:

  • You find yourself repeating the same mundane tasks over and over while working on a website
  • You put off updating your website because it’s a lot of little time consuming steps
  • You want to take your web development/design to the next level by increasing efficiency (like by minimizing/concating files)

What is Grunt?


In very basic terms, grunt is a script that automates mundane tasks. Tasks that you shouldn’t be wasting your time on if you’re a web developer. I mostly use Grunt to minify and concatenate my JavaScript and CSS files, but its capable of so much more than that.

How much of a difference can it really make?

I can actually give a real life example. I worked for an organization who had a website which had 18 separate asset files totaling 508kb. Some of them were CSS, most of them were JavaScript. The website was calling all 18 files individually and none of them were minified. One of my first tasks was to audit these files and see if I could optimize them in any way. They were also using an old version of Bootstrap and wanted to use the latest version because of all the cool new features of Bootstrap 3.

So my mission was get the performance up while not losing any functionality or the way the site looked. I upgraded their framework to Bootstrap 3 which is larger in file size (and which could be a topic for a completely different post because it was kinda tricky) and I reduced the number of requests to 3 files totaling 274kb. That’s a 54% reduction in size and a 600% reduction in server requests.

In a time when more and more of our traffic is coming from mobile devices, this was a pretty big win for us. The only reason I was able to do this in a sustainable way is because I found Grunt to help automate the concatenation and minification of files.

What Grunt allows you to do

Grunt allows you to separate your development files from your production files. This is really quite important and should excite you. This means you can develop the site as you always have, but now you’ll have a buddy named Grunt running in the background, doing the (excuse the pun) grunt work of optimizing files.

Grunt also allows you to easily deploy your websites via FTP or rsync. This will be a subject of a future post. You don’t even need to know how to deploy a website with Grunt to get something useful out of it.

Since Grunt runs on top of node.js, you’ll have access to package management via npm (node package manager). This is pretty cool and once you get more comfortable with grunt, you’ll see how cool it is to be able to install packages from the command line.

I’ve used Grunt with static HTML sites, PHP sites, and WordPress theme development and it hasn’t let me down yet. Grunt is capable of so much, but I’ve only found good use for it as a tool to help me automate my front-end web development.

Are you sold yet?

You should be, but in case you’re not, let me give you a real use case.

For example, say you are developing a site and you have 4 javascript files.

On your site when you call those javascript files, you probably have something in your HTML that looks like this:

<script type="text/javascript" src="scripts/script1.js"></script>
<script type="text/javascript" src="scripts/script2.js"></script>
<script type="text/javascript" src="scripts/script3.js"></script>
<script type="text/javascript" src="scripts/script4.js"></script>

This means your website is going to make 4 requests to the server to load these javascript files. But because you are an efficient web developer, you want to cut these 4 requests down to 1 and minify it so its as small as possible. So if you’re clever, maybe you’ll combine by copying & pasting, all these files into 1 file, then name it script-combined.js and minify it using a tool like this. Then you could load the file like this in your HTML:

<script type="text/javascript" src="scripts/scripts-combined.js"></script>

Now you’d have 4 javascript files combined into 1 file that is minified to be as small as possible. That would be one way to do it, but what about if you need to make updates to script2.js or script4.js?

You have to go through the steps again. Every update would be painful and would require you to perform the same repetitive tasks over and over. This doesn’t have to be the way though. If you’re currently doing development like this, stop it right now and learn these tools. Using grunt, you could literally perform all these tasks with 1 command in your command line or terminal. Now that’s efficient!

All the cool kids are doing it

Organizations like jQuery, WordPress, Twitter, and even WalMart use grunt to help with their web development needs. This is just another point in grunt’s favor of being an awesome, reliable tool. I’m normally hesitant to try out new tools, but when well-known companies and organizations adopt them, I know there must be something there worth checking out.

What’s next?

Be aware that its normal to be hesitant to trying new tools. There is a slight learning curve to picking these tools up, but don’t let that discourage you. You’ll be much better off with them than you were without them. 6 months from now you’ll wonder why it took you so long to check into these. If you’re intrigued and want to give grunt a shot, here’s some awesome links to check out.

Related Post

What do you think?