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?
How much of a difference can it really make?
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.
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.
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.
- Getting started (official Grunt documentation)
- Grunt for People Who Think Things Like Grunt are Weird and Hard – Chris Coyier
- Grunt – The Basics – Cary Landholt (video)