Grunt

So, people seem to be exited about something called ‘Grunt’…

Let’s explore.

From the Grunt website:

• Why should you use a task runner like Grunt?
  In one word: automation. Automation of what? Well, such repetitive tasks as: minification, compilation, unit testing, linting etc.
• Why Grunt?
  The Grunt ecosystem is huge with hundred of plugins. Coffeescript, handlebars, jade, JS Hint, {less}, require.js. SASS, Stylus etc.

Getting Started

Installation

– I installed Node.js using the windows installer available here

– Then install Grunt’s command line interface (CLI) from the (standard!) windows command line (doesn’t work from console2):

npm install -g grunt-cli 

This will put the grunt command in your system path, allowing it to be run from any directory.

Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously. Each time grunt is run, it looks for a locally installed Grunt using node’s require() system. Because of this, you can run grunt from any subfolder in your project. If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from your Gruntfile, and executes any tasks you’ve requested for it to run.

Preparing a new Grunt project

A typical setup will involve adding two files to your project: package.json and the Gruntfile.

package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins.

See for more here

For now let’s continue with focusing on Grunt in WP-development. Jonathan Christopher wrote down his approach: (link)

Configuring Grunt for your WordPress Theme

I’ve been spending some time reorganizing the folder structure of my WordPress themes, which does come into play when setting up Grunt with your project. Folder structure and file organization is really personal when it comes to a WordPress theme developer so rest assured this can be customized to integrate with your workflow, it doesn’t have to replicate mine top to bottom. Continuing, the folder structure I’ve been working with lately for my custom WordPress themes is as follows:

• client-name
  • assets
    • fonts – Any fonts used in the theme
    • images – Any images used in the theme
    • javascripts
      • build
      • source – Any custom JavaScript used in the theme
      • vendor – Any vendor-provided JavaScript used in the theme (e.g. jQuery plugins)
    • styles
      • build
      • source – Any custom Sass used in the theme
      • vendor – Any vendor-provided Sass used in the theme (e.g. third party mixins/functions)
    • Gruntfile.js
    • package.json
  • lib – Custom classes or otherwise that take care of heavier lifting
  • templates – All theme template files
    • partials – Partial templates (e.g. header, footer)
  • functions.php – Essentially repurposed as a bootloader for the content of lib
  • index.php
  • style.css