Introduction

➔ Grunt is a workflow / task automation tool.➔ Built on top of Node.js.➔ Primary focus is web development.➔ Awesome range of plugins.

A workflow / task automation tool

Build automation is the act of scripting or automating a wide variety of tasks that software developers do in their day-to-day activities including things like:

● compiling computer source code into binary code● packaging binary code● running tests● deployment to production systems● creating documentation and/or release notes

Built on top of It’s better than…

● Shell scripts / Batch files● ANT● Rake

➔ It’s written in JavaScript, and we all know that.➔ It’s modular, and manages its own dependencies in a

clean, source-control friendly way.

Focus is on web development

Enough talk.Show me some magic.

Let’s see what we can do with Grunt: http://bit.ly/19A7Vq7

This is cool, and it’s flexible. We can make it work with PHP/.NET

How did we achieve that?Plugins.

grunt-contrib-watch

grunt-contrib-connect

grunt-open

grunt-contrib-concat

grunt-contrib-sass

grunt-contrib-compress

grunt-contrib-clean

grunt-connect-rewrite

assemble

grunt-karma

grunt-imageoptim

grunt-plato

grunt-aws-s3

PluginsWatch filesystem for changes

Start a simple web server

Launch a browser

Concatenate files

Compile SASS files

Create Zip/Tar/Gz files

Empty a directory

Symlinks for web server

Generate a static website from templates

Karma testing

Optimize images

JS Static code analysis

Upload/Download from AWS S3

grunt-file-creator

grunt-text-replace

grunt-git-describe

grunt-contrib-copy

Create arbitrary files

Replace text in files

Get tags from Git

Copy files

Grunt does two really useful things.➔ It ties your plugins together

and runs them in a specific order.➔ It normalises (to a certain extent) the format in which

you supply options to the plugins.

➔ Grunt + NPM helps manage build dependencies.

As an added bonus…

Time for another trick....installing a project from scratch.

➔ Fresh directory / machine➔ Node.js & Grunt Cli installed (but nothing more)

➔ git clone https://github.com/psyked/grunt-example-project➔ cd grunt-example-project➔ npm install➔ grunt

Starting from scratch*

What is this magic?It’s package.json

Introducing package.json➔ It’s a standard part of Node.js➔ It describes your project, including its dependencies.➔ It gets auto-updated as you ‘install’ additional plugins for

your project.

➔ Create one using npm init➔ Auto-add dependencies by installing them with the --

save-dev flag

Enough talk.Show me how.

First up, let’s get started with Grunt1. Install Node.js2. From the command line, run:

npm install grunt-cli -g

Running Grunt tasks

➔ Run a default task: grunt

➔ Run a specific task: grunt taskname

➔ Run a task config: grunt taskname:config