This document provides an overview of Grunt, a JavaScript task runner. It explains that Grunt automates repetitive tasks like linting, minifying, and compiling files. The basics of using Grunt are described, including installing Grunt and plugins via npm, defining tasks in a Gruntfile.js, and some common tasks like linting JS, minifying files, compiling LESS. It also discusses running multiple tasks at once and using the watch task to automatically rerun tasks when files change.

1. GRUNT
THE JAVASCRIPT TASK RUNNER
Andres Callejas González
Gestión de la calidad de software - 2017

2. What is Grunt.js ?
Grunt is a task runner. This means that those repetitive tasks we
deal with in our daily workflow gets automated.
Task-based command line build tool for JavaScript projects.

3. Why use Grunt?
Your job becomes easier performing repetitive tasks.
You can use Grunt to automate everything whit a minimum of
effort.
“If someone hasn't already built what you need, authoring and
publishing your own Grunt plugin to npm is a breeze”

4. Basic Tasks
• Linting our JS files
• Minifying JS files
• Compiling LESS files
• Minifying CSS files
• Watching our files for changes and doing the above tasks.

5. First steps
(Assuming you have Node.js installed)
Grunt and Grunt plugins are installed and managed via npm, the
Node.js package manager
Run:
This will allow you to use the grunt command in your system path.

6. Package.json
When using npm, we define the
packages we need in a
package.json file which belongs
in the root directory of your
project.
The easiest way to add Grunt
and gruntplugins to an existing
package.json is with the
command:

7. Gruntfile.js
The Gruntfile.js belongs in the root directory of your project, next
to the package.json file.
A Gruntfile is comprised of the following parts:
• The "wrapper" function
• Project and task configuration
• Loading Grunt plugins and tasks
• Custom tasks

8. Gruntfile.js

9. Gruntfile.js

10. Linting JavaScript Files
contrib-jshint

11. Minifying JavaScript Files
contrib-uglify

12. Compiling LESS to CSS
contrib-less

13. Minifying CSS Files
contrib-cssmin

14. Running Multiple Tasks at Once
Is important to make things more efficient and run everything with
just one task, what is much better than running separate calls for
grunt uglify, grunt jshint and so on.
When you run grunt from the command line, Grunt will look for a
task called default, moreover, we could define multiple tasks in a
development environment and then when we go to production,
different tasks.

15. Running Multiple Tasks at Once

16. Running Multiple Tasks at Once

17. Watching For Changes and Running Tasks
The watch task will run every
time a file is changed and
saved. All we have to do is
configure it to watch certain
files and tell it what to do when
those files are changed.
Grunt-contrib-watch