5 Grunt Plugins for a Better Workflow
11/17/2013
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
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
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.
This task is simple (starting to see a pattern here?), you tell it where your test file[s] lives and tell it to use PhantomJS. Badabing, you are now unit testing your javascript!
(Installation instructions for PhantomJS)
Notify:
I like to tie all of these tasks together with the Notify task. Notify will use whatever system notification application you use (Growl, notify-send, Snarl or OSX Notification Center) to alert you when something is complete or fails.
If you're running jshint or mocha, this is a great tool because it allows you to write your javascript, save your file and continue on without having to confirm everything passed in your terminal.
When something fails, grunt-notify will alert you with a notification that looks like this:
Uglify
grunt-contrib-uglify on GitHub
The last task I always have in any project I create is the Uglify task. This task allows you to minify and obfuscate your javascript, which basically just means less code to do the same stuff.
I also like to add a banner with the package name, the package version, where the package lives and a timestamp.
Your Unique Workflow
Not all workflows are created equal, and it's likely that there are far superior workflows to this one out there. This is an example of me learning by doing and finding what works for me.
What are you doing to be more productive in creating your development projects? Do you have anything you'd add to make this one better?