“The capacity to learn is a gift; the ability to learn is a skill and the willingness to

learn is a choice”

Brian Herbert

GRUNT.JSTHE JAVASCRIPT TASK RUNNER

byKHALID KHAN

AGENDA● WHAT?● WHY?● HOW?● WHO?

WHAT?GRUNT IN A NUTSHELL

● Build Tool● Task-based (Task

Runner) ● Runs on command line● Runs on NodeJS● Open source● Cross platform

WHAT?TASK RUNNER?

● Linting JS (Enforcing JS standards, JS validations)

● Concatenation● Minification● Compilation of CSS

Preprocessors (Sass, LESS)● Image Optimization ● Automation

WHAT?NODEJS?

Question: “Do I have to know/learn NodeJS to learn/understand/use Grunt?”

Answer: “No.”

WHY?WHY A TASK RUNNER?

Mainly● Automation● Eliminates repetitive

tasks

WHY?WHY A TASK RUNNER?

● One time cost● Faster Development● Everyone else uses

it● Easy to use● Larger number of

great plugins for different tasks

HOW?

LETS START THE MAGIC…

HOW?DEMO

HOW?DEPENDENCIES

● NodeJS● npm (Node Package Manager)

Installing NodeJS will add npm to command line path

HOW?INSTALLATION

npm is already in our path (due to steps in previous slide) so running this command in terminal will install grunt-cli (grunt-command line interface)

$ npm install -g grunt-cli

HOW?CONFIGURATION FILES

● package.json● Grungfile.js

HOW?PACKAGE.JSON

HOW?READING PACKAGE.JSON

In terminal go to your project folder (where there is package.json file) and run this command:

$ npm install

HOW?THE NODE_MODULES FOLDER

HOW?CONCATENATE JS FILES

How to tell Grunt to concatenate JS files??

HOW?CONCATENATE JS FILES

Install plugin for concatenating files

$ npm install grunt-contrib-concat --save-dev

HOW?CONCATENATE JS FILES

I

HOW?

Gruntfile.js

HOW?GRUNTFILE.JS

HOW?GRUNTFILE.JS

HOW?CONCATENATE JS FILES

now run this command in your project folder and experience the magic

$ grunt

HOW?MINIFY JS FILES

Same process

1. install plugin$ npm install grunt-contrib-uglify

2. Add uglify task in Gruntfile.js3. run grunt command

$ grunt

HOW?MINIFY JS FILES

HOW?COMPILE SASS, LESS

Same process

1. install plugin$ npm install grunt-contrib-sass

2. Add sass task in Gruntfile.js3. run grunt command

$ grunt

HOW?MINIFY JS FILES

HOW?Validate JS FILES

Same process

1. install plugin$ npm install grunt-contrib-jshint

2. Add jshint task in Gruntfile.js3. run grunt command

$ grunt

HOW?

Automation

Even more interesting magic

HOW?WATCH PLUGIN

The plugin “Watch” monitors files and as soon as it detects a change, it triggers/runs tasks (concat, uglify, etc)

HOW?INSTALLING WATCH PLUGIN

Same process

1. install plugin$ npm install grunt-contrib-watch

2. Add watch task in Gruntfile.js3. run grunt command

$ grunt

HOW?

Example

WHO?DIFFERENT COMPANIES ALREADY USE GRUNT

Other Task Runners