Introduction to Grunt

This was a 15 minute session presented at NETC 2014.

What is Grunt

Grunt is a node.js powered task runner. What does that even mean? Grunt makes you more productive and less stressed.

More about Grunt

Grunt fills approximately the same role as make, rake, gradle, and maven in other development environments.

However, Grunt is based on node and fits into a JavaScript based workflow with fewer moving parts and dependencies to keep in sync.

How will Grunt help me

Grunt helps you:

  • Automate your workflow
  • Bring together best of class tools to improve how you create
  • Put your tasks into an independant, versionable container

Getting started with Grunt

Grunt needs several things to get started.

  1. node.js: It is node.js powered after all.
  2. package.json: This file contains information about your and contains a list of the Grunt modules that you'll to make things work.
  3. Gruntfile.js: This is the file that configures the from the package.json file and defines your tasks.

Once those are all assembled, you can run grunt and fire off various tasks for your project.

Some common Grunt tasks

Here are some common tasks that Grunt helps automate and gets all of these tasks out of your hair.

  • Compile Sass/SCSS/less
  • Concatenate JavaScript files
  • Minify CSS stylesheets
  • Uglify JavaScript files
  • Run lint-ers for JavaScript/CSS files

Maybe a little less mundane

But Grunt isn't just limited to JavaScript and CSS files.

Grunt can help with:

  • Configure and run unit and integration tests
  • Build projects in a 'src' to 'dist' fashion
  • Livereload the browser
  • Watch files for changes and fire tasks based on those changes
  • Start a local web server for development

How about something just a little more funky

Grunt isn't limited to particularly web related tasks. There are plugins to all sorts of other things such as:

  • Copy files to Amazon S3 platform
  • Minify SVG graphics
  • Compile Markdown documents
  • Generate OS Notifications

So how do I get in on this lazy lifestyle

  • Install node npm
  • Open a terminal or command shell and run npm install -g grunt-cli
  • Whip up a package.json file such as this: 
            
{
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-jshint": "~0.4.3"
  }
}
  • Run npm install
  • Define some grunt tasks in a Gruntfile.js
  • Run grunt

"Real World" use

How fast can you get started on a website? How about:

  1. git clone https://github.com/lafent/grunt-and-done.git
  2. cd grunt-and-done && npm install
  3. grunt

Now you have Twitter Bootstrap v3, jQuery, Google Analytics, less stylesheets, Jade html templating. a local web server, and a watch task to updating the output files upon save.

Not bad for three commands.

A word of caution

Careful with the plugins. There are plugins, then there are "plugins". Strictly speaking this problem is more properly with the node.js ecosystem, but the rapid rate of development, general flexibility, and somewhat ambiguous quality of some of the plugins and modules can have some unpleasant side effects.

Always practice safe computing.

Questions?

Just shoot me an email, catch me on IRC, or hit me up on twitter.