5 Grunt Plugins for a Better Workflow


Grunt has become the build tool/task manager standard for javascript developers and empowered us to take control of our workflows. Better workflows mean better productivity, and Grunt has some great plugins for maximizing that productivity.

I wanted to write a Javascript cookie manager utility, knowing full well that I was reinventing the wheel, so that I could learn how to write better Javascript as well as play with grunt.

I found that when writing any kind of javascript utility or framework, there are a few tasks that I consider standard for my projects: Watching files for changes and running tasks, checking my javascript for code consistency, running functional tests, minifying javascript and a way for the system to alert me when something goes wrong.

A quick note: All of these tasks leverage minimatch, a 'minimal matching' utility that I highly recommend reading up on if you haven't already: minimatch on GitHub

#Grunt Watch: So you can just work

grunt-contrib-watch on GitHub

I rarely, if ever, create a Grunt file without including watch. Being able to run grunt watch and know that I don't need to run my tasks over and over again allows me to shave of huge amounts of time having to context switch between the terminal and my editor.

For my cookie manager utility, this is what my watch task looks like:

Watch is pretty straight forward:

  • Give it parameters for files you want to watch.
  • Tell it what tasks you want to run.

Your watch task can get pretty complex with options, but I keep mine basic by just enabling livereload (which will refresh my browser automatically).

#JSHint: For Writing Consistent Javascript

grunt-contrib-jshint on GitHub

JSHint allows you to write cleaner, more consistent javascript. You can define your project's code standards by creating a .jshintrc. As most everything javascript, it's an object with key/value pairs of what standards you want to follow.

Like watch, the jshint task can be pretty simple, just pass it a minimatch array of files you want it to check and you're on your way. One extra option that I didn't show in the example above is the beforeconcat and afterconcat options. This allows you to run jshint on your source files before and your concatenated files after.

#Mocha: Automated Unit Testing

grunt-mocha on GitHub

Unit testing (or any formal testing for that matter), seems to me to be the most under-utilized tool most front-end developers have. As developers, we could save a lot of time simply by leveraging unit tests to make sure we don't break or regress code we've already written. Thankfully, there are a lot of great testing frameworks out there, and Mocha is the one that I like to use, because it allows you to run client-side unit tests in a headless browser.

If all of that sounded like white noise, I'd check out Smashing Magazine's Introdution to Javascript Testing.

chaseonsoftware.com is powered by GatsbyJS, GitHub & Netlify.
Find the source for chaseonsoftware.com on GitHub.
👋 Say Hi!