Productivity, Workflow Tools

Grunt Boilerplate

What is Grunt? Grunt is a JavaScript Task Runner.

As written on Grunt JS…

“Why use a task runner?
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, a task runner can do most of that mundane work for you—and your team—with basically zero effort.”

“Why use Grunt?
The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn’t already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze.”

So if you’re using my Grunt Boilerplate, it will compile your Sass files to CSS, minify and combine all of the JavaScript files into one file, will “detect errors and potential problems in JavaScript code” using JSHint, will optimize your png and jpg files on the fly and will watch for any modified files that are in the ‘watched’ task.

First you need to install Node JS as Grunt is a npm module that runs off Node JS.

Now to start using Grunt, follow the steps on the ‘Getting started’ page.

In your Terminal / Command Line, type:

(sudo) npm install -g grunt-cli

(Use sudo if you’re on a Mac.)

Once you’ve installed Grunt, I am assuming you’ll be using my ‘Grunt Boilerplate‘ as your project? So therefore we’ll be working on an existing project. So to run Grunt, do the following (as described by Grunt):

In your Terminal / Command Line:

  1. Navigate to your projects’ root directory.
  2. npm install

    – this will install the project dependencies.

  3. grunt

    – to run Grunt

There are two important files when using Grunt and they are:

  1. package.json – This file lists grunt and the Grunt plugins that the project needs as devDependencies.
  2. Gruntfile.js – This file is used to configure, define tasks and load Grunt plugins.

For more information on each Grunt plugin listed (and what they do in this boilerplate), read the following links:

Read more about configuring and creating Grunt tasks.

Tada! you should now be up and running using Grunt!

More about this Grunt Boilerplate

It’s a simplified version of Chris Coyiers’ Grunt Boilerplate based on the CSS Tricks screencast First Moments with Grunt which also accompanies the article written by Chris, Grunt for People Who Think Things Like Grunt are Weird and Hard.

Using this Grunt Boilerplate in Git

Clone the repository (using either HTTPS, SSH or Subversion):

git clone git@github.com:adelineyaw/GruntBoilerplate.git

Run the npm install:

npm install

Run Grunt:

grunt
Standard