Many how-to articles about Grunt, NPM, NodeJS, etc. assume a fairly nerd-like level of familiarity with necessary downloads and the command line. This how-to article does not. In short order, you will have Grunt running on your first project, and have joined the rank of super nerds.

by Sean O’Dwyer designicu.com and Jimmy Smutek smutek.net

Grunt

If you don’t know what Grunt is, and why you might love using it, have a quick read here http://gruntjs.com/.

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Prerequisites

Before proceeding, make sure you’ve already…

  1. set up a local development install of WordPress using the Roots starter theme;
  2. installed MAMP and have it running and pointed to your project directory.
  3. quickly reviewed http://24ways.org/2013/grunt-is-not-weird-and-hard/

In other words: your local WordPress dev site is up and running in your browser.

Of course, you should also be familiar with LESS, and happy editing the files in /assets/less/bootstrap/. That’s why you’re here.

The Problem

After reviewing this handy Treehouse article you realize that, to install Grunt, you first have to install NodeJS, which means you first have to install NPM, which means you first have to install Xcode.

This is all true. But this article takes a different tack to the Treehouse article. We don’t install Homebrew. Instead, we’ll show you how to get Grunt up and running with only a little fuss.

All the steps you need to follow are included below.

Download a Ton of Software

  1. Install Xcode. Easy. Go to the App Store. This takes a really long time but it’s simple.
  2. Install Node. Easy, download from http://nodejs.org/ and run the installer. NPM comes with Node.
  3. Do https://docs.npmjs.com/getting-started/fixing-npm-permissions which takes care of the permissions issues that you would otherwise run into. Follow Option 1. It changes the permissions so things just work.
  4. Terminal: ‘npm install -g grunt-cli’ which installs the Grunt client on your machine.
  5. Install the LiveReload plugin for your browser. Grab it from http://livereload.com/extensions/.

The Good News

This is the last time you’ll have to do the steps above. Everything below, you do for each project you work on; it takes about one 30 seconds each time.

Install Grunt for a Project

Terminal: cd to the project directory. A quick way to do this is to type cd, leave a space, and then drag the folder directly into Terminal. Release and you’ll see the full path appear right after your cd . Hit return. Now type npm install and hit return again.

Consequences for Your Git Repo

A new folder called /node_modules/ appears in your project folder. It contains over 2000 super-nerd files, none of which you need to repo.

Usually, NPM will add a .gitignore file to tell your repo to ignore /node_modules/. If it doesn’t, just use your text editor to make one. Put it in the main project directory, so it’s next to the /.git/ directory. Add one line…

/node_modules/

…and add any other files or directories you don’t want to repo, placing each one on its own line.

Save.

Normally, in the Finder, you can’t see files whose names begin with a dot. However, with BBEdit or another text editor, you can see them if you choose OPEN or SAVE from the FILE menu. Just navigate to your project folder from inside your editor.

Activate LiveReload

In your Roots project folder, search Gruntfile.js for “livereload”.
Change livereload: false to livereload: true.
Save.

The Fun Part

If you haven’t already done so: switch MAMP over to your project directory.

Make sure LiveReload is enabled in your browser: click that new icon!

Back in Terminal, type grunt watch. Hit enter. The process starts running.

Tweak a LESS file. In /assets/less/bootstrap/variables.less make your background red, your body text white, whatever you like.

Save.

Keep an eye on your Terminal window. You’ll see output that tells you what Grunt is doing.

Grunt will update main.min.css and the new styles will auto-load in your browser.

Note: grunt watch will run until you kill the process with ctrl-C, or you exit Terminal.

Enjoy your day.

Leave a Reply

‹ Back to Latest Articles