What? I’m writing an article on how to use grunt.js & node to help optimize your UX prototyping. development, coding,  and design processes. I usually don’t write technical guides, but a lot of people have asked me  how I use these tools.

The last several months I have been knee deep in the trenches practicing what I preach. In that span of time I found the need to write a few complex build scripts  with grunt.js and coffee script. A lot of these I have shared out on github. I figured it was a time to get a bit more technical. Also it’s really hard to find this information online.

WHY WOULD I WANT TO USE GRUNT.JS & NODE.JS?

Why would you ever want to spend time on the command line? Let’s get right to the meat of why you will want to learn these methods. I’ve listed below a few sample tasks you might optimize, remove, or make better with grunt & node.

  • minify your files automatically
  • convert coffeescript to javascript
  • compile less or sass
  • work with frameworks such as bootstrap 3, foundation, meteor, backbone, the list goes on.
  • run phantom.js or front end javascript unit testing
  • compile component based html
  • compress images
  • create sprite based css images
  • create your own build script built on your process and the way YOU do things
  • keep your front end dev tools up-to-date with things like bower.js
  • run a self contained express node web server (great for quick testing)
  • merge multiple pieces of code into a single file (single part jquery mobile app)
  • custom build output directories
  • build complex web apps
  • create tasks to build re-usable backbone.js or other types of snippets
  • uglify your code
  • automatically watch for changes and run tasks
  • rename files as you move them around
  • more….

Hopefully, this gets your mind thinking about what you might be able to do with grunt.js. It took me just a few weeks of working with grunt.js to arrive at a list of possibilities. Had I seen an easy to understand bullet list like the one above. I probably would have jumped in quicker and become a believer.

I first came across these tools about a year or so back. I also attended the SXSW panel on grunt.js on and yeoman. It really inspired me to learn as much as I could. Of course, I have to give a shout out to one of my developer friends who urged me to keep going even when encountering some sticky issues (Think yelling and screaming at computer).

Some coding tasks are grunt work and just that. Using a little bit of pre-setup you can optimize and speed up nearly all of these one off tasks you do when building a website, wordpress theme, mobile application. You name it. At some point I hope to do a video series on some techniques. For now you’ll just have to read and follow along.

MY APPROACH TO LEARNING GRUNT.JS

Above all I wanted an approach that makes sense to non-technical UX people. You will be inside command line to make this work. It’s ok, don’t freak out. I know I did for awhile then I realized just how much time can be saved by identifying complex repeatable tasks – One of the main skills we do when performing UX work.  The hard part is learning the syntax, a few basic things on node and grunt.js and then breaking your workflow into small task chunks.

WHAT YOU NEED TO GET STARTED

  • A basic understanding of JavaScript, node.js and grunt. Don’t worry, I’ll go into these just enough to get you started.
  •  A nice command line tool (PC console 2 / Mac Iterm)  – I consider these nice because you can use tabs, colors, etc to customize them to better fit your needs.
  • An editor of some type.  I personally use Sublime Text 3
  • Install Node For Windows or Mac – I recommend you leave all the settings to default and make sure you include node in your Path (Essentially this lets you run node commands at the command prompt in console 2 / iterm etc).

Awesome! You should now have node.js working at your command prompt. Let’s test it. Open up your command line tool of choice and type.

node -v

You should be greeted by a friendly v.0.10.21 or some variation. Take a breath, relax and let’s continue. There are a few more steps to getting up and running with grunt.js and these are all referenced nicely on the grunt.js web site.  So if you have an issue I would look there and read up but in a nut shell from command line do the following. There is a chance that if you are on Mac you may need to use sudo to run these commands.

npm install -g grunt-cli

followed by:

npm install grunt --save-dev

followed by:

grunt -version

You should see something like this:

grunt-cli v0.1.13
grunt v0.4.2

Not to go into great details but this has essentially installed grunt and various npm modules to make grunt work. If you ever need to update to the latest active release of grunt you can re-run the npm install command. The very nature of node means they update  libraries and essentials modules rapidly. It’s a good practice to see what version you are on versus what is the latest current version released.

UNDERSTANDING THE PACKAGE.JSON

When I first started to use grunt.js I started without using a package.json. This was in part because I didn’t understand the value or need to setup yet another file just to get shit done.   Well let me save you the headache of learning that step. I’ll try to be as clear as possible about what the package.json does.

The package.json is essentially a json file that contains your grunt.js task dependencies, and some other information about your grunt script. Information such as name, version, description, git repository, and version of node your script can run on.

Great you say, but what does that mean! Think of it like this. The package.json is a blueprint of grunt & node packages that make your grunt.js tasks work.

The beauty of a well thought out package.json is anyone can use your grunt scripts by simply getting grunt running, creating a directory, dropping in the grunt.js (or grunt.coffee) and package.json and then running grunt. That is pretty cool as anyone in your build process can run your process or customize it further.

Here is a sample package.json from my AUTO Jquery Mobile Project on github. I include several dependencies to make my grunt tasks work.

{
 "name": "JQMAUTOV1",
 "version": "1.1.0",
 "description": "A quick rapid mobile app framework and build script",
 "author": "Preston McCauley",
 "repository":{
 "type" : "git",
 "url" : "https://github.com/imaginethepoet/autojqm" 
 },
 "devDependencies": {
 "grunt": "~0.4.1",
 "bower": "~1.2.7",
 "grunt-contrib-copy": "~0.4.1",
 "grunt-contrib-clean": "~0.4.0",
 "grunt-contrib-jshint": "~0.3.0",
 "grunt-contrib-uglify": "~0.2.4",
 "grunt-contrib-watch": "~0.5.1",
 "grunt-contrib-coffee": "~0.4.0",
 "grunt-bower-task": "~0.3.2",
 "grunt-contrib-concat": "~0.3.0",
 "grunt-text-replace": "~0.3.7", 
 "grunt-shell": "~0.3.1",
 "grunt-contrib-connect": "~0.5.0",
 "grunt-bake": "~0.2.1",
 "connect-livereload": "~0.3.0",
 "grunt-contrib-less": "~0.7.0"
 },
 "engine": "node >= 0.4.1"
}

You can also see this file here

Under dependencies you will see that I am listing the grunt package name and the version number to use. A ~ tilde means any version greater than the specified version.

All of these dependencies do various specialized tasks. We will take a deeper look at these in the future. For now just understand that there are a lot of grunt plugins and node modules that can be used. The familiar syntax for creating tasks in each of these plugins makes it relatively easy to implement and create new tasks for various steps in your development cycle.

A BRIEF WORD ON COFFEESCRIPT & JAVASCRIPT

When I first started with grunt.js I was using Javascript. Thanks to a persistent developer I have found it much easier to understand and write my gruntfile tasks in coffeescript. I’m still very much learning coffeescript. Fortunately, there are some tools out there to help with Javascript to coffeescript translation.  So why learn another pseudo script language? The main reason I think UX designers will love coffeescript is because you worry less about {{{}},;} and easily forgotten syntax and focus on indents to create your javascript. Don’t be mistaken because complexity does still exist in coffeescript. There is a learning curve, but one of the things you can do with grunt.js is create a task to take your coffeescript files for your project, compile them as Javascript and minify them at the same time. The great part is you can write this as a task and not even have to think about doing it! That’s what we are going to do in the next part of this article. If you like what you see be sure to share and tweet this out.

http://js2coffee.org/