Grunt and Bower in WordPress Part 1

For too long I was terrified of doing anything in the terminal.

Even though I grew up navigating my way around DOS on my old 386 through the command line like a cd/ ninja, I always have this fear that the next time I hit enter will be disastrous. It’s taken me a while to warm up to its weird ~./$bash ways. Luckily I had a friend who was able to get me set up and it’s made the terminal a little more fun to use.

If you want to get the rundown on Grunt and why it’s great for your workflow, Chris Coyier wrote a great article on 24ways.org which can get you started, but I’m going to take it a few steps further.

Terminal Setup for Fun++

I’ll give you the rundown on my setup. This is assuming you’re on OSX. If you’re a Windows user, I can’t help you. Except I do have a MacBook for sale if you want it.

Get iTerm2

Fire up iTerm2 and install OhMyZsh. This will clean up your command prompt and is just overall nicer to use than the default. Installing with the curl method worked great for me:

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Get Homebrew

But you need Xcode installed first. This will help keep all the packages you install separate from your system. Just paste this into the terminal:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

It may prompt you in the middle to install Xcode Command Line Tools. You need that so say yes.

Get Homebrew up to date and clean

brew update

then:

brew doctor

and add it to your path:

export PATH="/usr/local/bin:$PATH" >> ~/.bash_profile

Install Node.js

brew install node

Install the Grunt CLI

npm install -g grunt-cli

Install Bower

npm install -g bower

Whew! If all of that went well, pat yourself on the back. That’s rare. If you had an error somewhere, it may be because you already had Node installed and there’s a conflict. Do a quick Google search and see if anyone else has the error. Chances are it’s been solved before.

Project Setup

All of that stuff you just installed is going to live on your machine. It’s not project specific. The other component to this is the stuff that will live inside your project - your Node and Bower packages. There are a few ways you can set this up, but I’ll show you how I have mine, relative to the theme folder:

your_theme_folder
└─ assets // the files you will be editing
   └─ less
   └─ js
   └─ img
   build // the compiled, minified & optimized files
   └─ css
   └─ js
   └─ img
   bower_components // home to your Bower packages
   node_modules     // home to your Node packages
   bower.json       // the list of your Bower packages
   package.json     // the list of your Node packages
   Gruntfile.js     // where the Grunt magic happens

I like putting this in my theme folder because it really is part of your custom theme, not WordPress itself. And if you make your theme a repo, you can include your setup files and ignore the package folders. They’ll be rebuilt the first time you run the project Node and Bower installers. Just keep in mind that if you’re deploying from your repo and it’s not going to a Node server that’s running Grunt to build your files, you’ll want to include the bower_components folder in your repo since you’ll probably be referencing some files in there.

Bower Setup

We’ll start with Bower, since it’s the simpler part of the process. You need to create a file in your theme folder called bower.json. Paste this in to get you started:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "dependencies": {

  }
}

Once you’ve saved that file, go to iTerm and cd to your theme folder. As an example, let’s install Bootstrap into our project:

bower install bootstrap

Huzzah! You’ve got Bootstrap, and every time you run bower update from your theme folder, it will update Bootstrap and any other packages you install to the latest version. You can search for Bower packages of plugins and frameworks you want to use here.

Grunt Setup

Create a file in your theme folder called package.json and paste this into it:

{
  "name": "your-project",
  "version": "1.0.0",
  "dependencies": {

  }
}

Save that and run this from your theme folder:

npm install grunt --save

It’ll create a folder called node_modules and drop Grunt into it. Pretty sweet. This not only installs the package but saves it in your package.json file for you. You can search for other packages you may need here.

In the future, grunt init will create package.json and install Grunt for you but I thought it would be good for you to see what’s happening so you’ll know what’s going on when you have to open up the files.

Grunt Configuration in Part 2

That should be enough to get started. I probably got something wrong in there too. It’s a little bit of a complicated process. If I did, kindly point it out and I’ll fix it. I’ll be following up with an in-depth Grunt setup that will make your projects a blast to work on.