Gruntin' Along


View My Grunt Setup on Github

Full Boilerplate Here

Grunt.js is a Javascript task runner. It’s guaranteed to help you not be so afraid of a command-line interface.

Can you image something you wanted a robot to do? Compile your SASS? Deploy files to your FTP? Bring you a sandwich? Spin up a server? Concatenate & uglify all your Javascript files? You could use half a dozen different apps with a GUI to do those things for you or you could just setup Grunt and get to work and like not run a bunch of applications you don’t need.

Grunt.js lets you automate those tasks, that you’ll likely do every other minute with very little effort. By little effort, I mean typing some commands in the Terminal. Through some Node.js magic, boom automated workflow

Oh Boy, That Sounds Complicated

Yeah, well hasn’t everything with web design seemed complicated? At first it probably did. But most of us took it bit by bit, cleared a path through it and lived to tell the tale. There is somewhat of a learning curve. But guess what? It’s not so complicated. Chris Coyier gave us a great introduction with his 24 Ways post & a nice video tutorial on CSS-Tricks.

Basically, you setup two files in your root folder, package.json and a Gruntfile.js/Gruntfile.coffee. Hop out to the command line and install Node.js and the CGI for Grunt, globally. Then you change your directory to back to your root and choose some tasks to run. For instance, compiling your SASS files into CSS. Install the Node module that automates that task, configure it and you’re done.

But what about Codekit?

Well what about Codekit? It’s not going away. It’s still really useful software. Codekit handles certain things very well, like detecting which mixin library you wanted to include without installing it manually. It can preprocess your CSS really well if you’re using LESS or SASS and then inject those styles in the browser as your working. It’ll concatenate your Javascript files & optimize your images for you.

It’s lacking in the way of customization. It does the things I mentioned above well (sans maybe concatenating your Javascript) but the list ends there. It doesn’t do much more for you. So if you wanted it to create image sprites for you or spin up a local server or push to git & your FTP, you need another application to do those things.

Personally, I think Codekit will get better over time and give more options, more flexibility. But in really, Codekit shouldn’t bend and break for every whim, need or idea of how you work. That molds and changes from day to day and project to project. And so should your solutions.