Learn about 5 Grunt build tool plugins to optimize your workflow.
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).
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
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.
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.
When something fails, grunt-notify will alert you with a notification that looks like this:
The options here are totally optional, but I like to keep my js hint notifications to around 5 and I like to see what project the notification is for. If you do this, you'll have to register a new task for watch and notify to run together (as far as I know), that should look like this:
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?