Grunt

FatKit Grunt Setup

A guide on how to install FatKit via the command line and use Grunt to build and manage the heavy lifting, while you create wonderful sites of joy - Jim Bateson, OBE


Get Started

Before actually installing and running Grunt there are a few things you need to have installed and running. So lets get those out of the way to start with. This is the bit that takes some time. Once all of this is installed you won't have to worry about it again when using Grunt.

MAC users, you have this easy as most of what you need here is pre-installed!


Node.js

Grunt is built on top of Node.js, so you need to install Node JS globally. Get the latest version here (make sure it's the latest, not 'Mature & Dependable'), run it and follow the installation wizard through. To see if it's worked correctly, open up the Node.js command prompt (not Node itself or the standard Windows Command Prompt) and type node -v you should see the latest verion of Node displayed.

NOTE When using Grunt run everything through the Node js command prompt as it does stuff the normal cmd doesn't.


Python

When doing a fresh install of the Grunt tasks, many of them rely on Python being installed. To save any errors when installing lets just get it out of the way now. Download from here.

NOTE Install the version 2-.*, as the newer version doesn't support something that Grunt needs or something like that, don't ask as I don't know.


Environment done!

If you're at this stage and you remembered to ADD PYTHON TO PATH you can continue the setup by installing GitHub and getting yourself a copy of FatKit.

Let's do it!


A Few Little Extras


sublime-grunt

No need to be put off by the command line, there is a package for Sublime that will allow you to run Grunt! In all honestly I've had mixed experiences installing this. If it does work though it's brilliant.

There are a couple of config requirements as well as just installing the package, so for full setup details check the GitHub page or find out more here.


Grunt Chrome extension

Chrome also has a really useful extension that you can use to run your Grunt builds from, and also run individual tasks from! Take a look at this article on how to get it setup.

I'm still getting used to my workflow using this, but essentially once you have installed it in the directory with your gruntfile in, run grunt-devtools, open your browser and you should have a Grunt tab in your console. From here you should see all the tasks / builds listed out from your project. You can hover over these tasks / builds to run them, and also cancel them. The console will display the output of these tasks, rather than you having to switch to your command prompt.

Running individual tasks is awesome because if you make a change to one of your grunt js files, you can run the individual tasks from here to check if it works, rather then running the whole build again!


Further reading

Here are a few articles I found useful getting set up with Grunt:


Now you are ready to get FatKit and start building your project! Go to the next step.