Grunt Roundup

Two years ago, the front-end development team shared their favorite and most used tools for improving workflow in Doug’s post, “What’s In Your Toolbox?.” The following year, Grunt.js was released, and has since developed a growing and active community. We’ve started to use Grunt.js for various things and it has further enhanced and streamlined our build process with automation, optimization and testing. So as a follow-up to Doug's original post, I polled the team again, this time specifically about favorite Grunt tasks and plugins. Here’s what we all had to say:

Jeremy Frank

Assemble
This is a great plugin for small to medium sized flat site builds where a set of “static” HTML pages are handed off to a client for integration with a CMS. Support for Handlebars templates is baked-in, allowing you to keep you layouts, pages and partials separate. Just configure your “watch” task to run the assemble task whenever any layouts, pages or partials are modified. Pages are automatically built to your destination directory. Additionally, external data files can be supplied to templates, making it super easy to render the same information in different ways on other templates.

matchdep
Save yourself the time of manually writing calls to grunt.loadNpmTasks and use matchdep instead. It reads your package.json file and and allows you to filter and automatically load dependancies. Couple this module with loading external task configurations with node's require method, and you'll have yourself a super short and clean Gruntfile.

Doug Avery

Shell
Sometimes you just need to do it yourself — grunt-shell gives you the simple, but powerful, ability to add your own shell commands to a chain of grunt tasks. This is great if you’re up against a problem that no existing grunt plugin handles (restarting a server, mogrifying images, etc).

Copy
Bulk copy/rename files from source directories to targets. Belongs in nearly every toolset, since it allows you to non-destructively setup files and tmp files for more powerful chains. (Hint: If you need copy, you probably also need Clean.)

ImageMagick
Provides a simple interface for ImageMagick, and contains some especially useful shortcuts for resizing and generating retina/low-quality images. Works particularly well with https://github.com/teleject/hisrc

Nate Hunzaker

Require
Adds the ability to configure optimization builds of RequireJS. It also has a “done” hook should any sort of additional work (such as running other tasks) needs to happen

Lodash
Lodash has a ton of utility functions, but often we don’t use quite a few of them. This task allows you to configure what to include, by individual function or a suite, and set up things like what delimiters to use for templates ({{foo}} vs {% foo %}). I also think it does some other black magic that isn’t documented.

Testem
I like Testem because of how easy it is to set up. This task is just a way to set it up inside of grunt instead of a testem.json file.

Chris Manning

Grunticon
Grunticon takes a folder of SVG/PNG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.

Tommy Marshall

handlebars-helpers
This library of 100+ handlebars helpers is a dependency for assemble, with some helpful features like {{default}}, {{formatDate}}, and {{hyphenate}}.

Yours?

So those are some of our favorite Grunt utilities. What are some of yours? Let us know in the comment section. Also, be sure to check out Chris Manning’s post on using Git Hooks in Grunt, and some of our own homegrown Grunt tools: Grunterplate by Doug Avery and Grunt Complexity by Nate Hunzaker.