The document discusses Grunt.js, a JavaScript task runner. It can automate tasks like linting JavaScript, concatenating files, minifying code, and compiling CSS preprocessors. Grunt runs from the command line using Node.js. Common tasks like validating, concatenating, and minifying code can be easily automated by installing plugins and configuring tasks in a Gruntfile.js.

1. “The capacity to learn is a gift; the ability to learn
is a skill and the willingness to learn is a choice”
Brian Herbert

2. GRUNT.JS
THE JAVASCRIPT TASK RUNNER
by
KHALID KHAN

3. AGENDA
● WHAT?
● WHY?
● HOW?
● WHO?

4. WHAT?
GRUNT IN A NUTSHELL
● Build Tool
● Task-based (Task Runner)
● Runs on command line
● Runs on NodeJS
● Open source
● Cross platform

5. WHAT?
TASK RUNNER?
● Linting JS (Enforcing JS
standards, JS validations)
● Concatenation
● Minification
● Compilation of CSS
Preprocessors (Sass, LESS)
● Image Optimization
● Automation

6. WHAT?
NODEJS?
Question: “Do I have to know/learn NodeJS to
learn/understand/use Grunt?”
Answer: “No.”

7. WHY?
WHY A TASK RUNNER?
Mainly
● Automation
● Eliminates repetitive
tasks

8. 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

9. HOW?
LETS START THE MAGIC…

10. HOW?
DEMO

11. HOW?
DEPENDENCIES
● NodeJS
● npm (Node Package Manager)
Installing NodeJS will add npm to
command line path

12. 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

13. HOW?
CONFIGURATION FILES
● package.json
● Grungfile.js

14. HOW?
PACKAGE.JSON

15. HOW?
READING PACKAGE.JSON
In terminal go to your project folder (where there is
package.json file) and run this command:
$ npm install

16. HOW?
THE NODE_MODULES FOLDER

17. HOW?
CONCATENATE JS FILES
How to tell Grunt to concatenate JS files??

18. HOW?
CONCATENATE JS FILES
Install plugin for concatenating files
$ npm install grunt-contrib-concat --save-dev

19. HOW?
CONCATENATE JS FILES
I

20. HOW?
Gruntfile.js

21. HOW?
GRUNTFILE.JS

22. HOW?
GRUNTFILE.JS

23. HOW?
CONCATENATE JS FILES
now run this command in your project folder and
experience the magic
$ grunt

24. HOW?
MINIFY JS FILES
Same process
1. install plugin
$ npm install grunt-contrib-uglify
1. Add uglify task in Gruntfile.js
2. run grunt command
$ grunt

25. HOW?
MINIFY JS FILES

26. HOW?
COMPILE SASS, LESS
Same process
1. install plugin
$ npm install grunt-contrib-sass
1. Add sass task in Gruntfile.js
2. run grunt command
$ grunt

27. HOW?
MINIFY JS FILES

28. HOW?
Validate JS FILES
Same process
1. install plugin
$ npm install grunt-contrib-jshint
1. Add jshint task in Gruntfile.js
2. run grunt command
$ grunt

29. HOW?
Automation
Even more interesting magic

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

31. HOW?
INSTALLING WATCH PLUGIN
Same process
1. install plugin
$ npm install grunt-contrib-watch
1. Add watch task in Gruntfile.js
2. run grunt command
$ grunt

33. HOW?
Example

34. WHO?
DIFFERENT COMPANIES ALREADY USE GRUNT

35. Other Task Runners