Joshua Milford Web Developer
Grunt’s Not That Bad
I’ve been using Grunt for a few years, and if time were measured in weight units, it’s save me a ton of time. I’ve shared my gruntfile.js, and I’d like to share the ways I put Grunt to work for me.
I consider Chris Coyier’s Grunt for People Who Think Things Like Grunt are Weird and Hard to be the go-to resource for getting started. While it looks intimidating with all the .json files and command line and git stuff, it’s totally worth it. Grunt’s like a tiny staff of people who do things you don’t want to do. Over and over. And really fast. And the sweet thing is, once you’ve set up a base gruntfile (or ganked someone else’s), you can use it from project to project without giving it any thought.
The way my Grunt workflow goes is like this:
Whenever I save a Sass file, Grunt combines all my sass files into a single, minified CSS file. Whenever I save a .js file, all my .js files are combined into a single, minified .js file. So, theoretically, I can go from requiring a handful of CSS files and another handful of .js files (too many HTTP requests!) to just one of each. And I don’t have to think about it. Or do anything.
Additionally, whenever I save a file, I get a nice notification, “Good to Go!”, in the corner of my screen, and my browser automatically refreshes, giving me instant feedback of my awesome edits (or bugs).
Those are the basics, but you can tell it to do so much more. Use CSS sprites? Just tell Spritesmith to look for all the images in a directory and make a spritesheet. And the corresponding CSS. And a retina version. How about SVG icons? Tell Grunticon to look through a directory, make a few different formats of each file, and magically serve your users the most appropriate. You can continue to identify things that you do over and over and over again, and there’s a decent chance there’s a Grunt plugin that’ll ease the burden.
Again, while the setup can be a hurdle, once it’s cleared, you’ll save a ton of time!