grunt understanding
DESCRIPTION
Introduction to Grunt and tutorial on how to use GruntTRANSCRIPT
“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