Setting up Roots locally on Windows 8

So one of the biggest headaches I have is that some sites assume I know everything. When Roots (which we use) tells me to install Grunt locally, the confusion just increases. How do I do that? I watched tutorials and it didn’t make any sense. So here’s the run-down and walkthrough.

Make sure you set your wp-config file for Roots or you’ll notice nothing changes in your css when you update:

define('WP_ENV', 'development');


Set up your theme folder

Make a new folder in your WordPress theme directory.

Grab the latest ZIP from the Github for Roots and take the guts to set up in your theme.

This should all be saved in the folder of your new theme. As you can see if you look around, some of the assets are missing because you really do need to use Grunt for this to work.

Download and install node.js

Navigate to http://nodejs.org/download/ and click the Windows Installer.

Install Grunt

From there, you’ll want to go to to the Node.js command prompt and type in the following:

[code xclass=”prettyprint”]npm install -g grunt-cli[/code]

This will install grunt globally on your system so you can access it from a project folder anywhere. I like to double check to make sure it installs correctly. You can use the command [code xclass=”prettyprint”]where grunt[/code] to output the path that Grunt lives. It should be under user > AppData > Roaming > npm.

Install Git Bash

Now I use Git Bash to quickly utilize the utilities of Roots.

You can get the Git UI and Git Bash utilities here. The nice thing about the downloads page is you have your download button front-and-center for your OS.

You don’t really need to check anything special as it installs. More is up to your preference.

Install dependencies

Once installed, you’ll want to open Git Bash (right click in the folder to open Git Bash with your path already included)

Type in [code xclass=”prettyprint”]npm install[/code] and your project will be ready to accept Grunt commands!

First you’ll want to set up all your assets. To do this you will need to type in [code xclass=”prettyprint”]grunt dev[/code].

You will then want to watch the folder for changes using [code xclass=”prettyprint”]grunt watch[/code] and then when you’re ready to deploy, use [code xclass=”prettyprint”]grunt build[/code] to create minified assets for a live environment.

Just remember to comment out the environment line or change to production so you can utilize those minified assets.