Introduction to GruntTask manager for JavaScript

By: Aliasger Jaffer

25/02/2016 1

What does it do?

Runs on Node.js

Allows management of tasks such as: Minifying files

Running jshint against source javascript

Minifying CSS

Compiling Sass to CSS

Run jasmine specs heedlessly through Phantomjs

… and a lot more

Each task is installed as npm package Check http://gruntjs.com/plugins for all the available tasks

25/02/2016 Introduction to Grunt 2

Installing Grunt

Pre-requisite: Install Node.js (https://nodejs.org)

On command line (or Terminal), install grunt-cli: npm install –g grunt-cli

-g installs this package globally

Inside your web project, install grunt npm install grunt --save-dev

Make sure you have package.json already there (run npm init first if you don’t).

--save-dev saves grunt as a dev dependency in the package.json file

You should now see grunt as a folder inside node_modules in your web project

25/02/2016 Introduction to Grunt 3

Gruntfile.js (a)

Grunt configuration file – placed in root web project directory

Contains: initConfig method that is passed an object

Object contains grunt module configuration information

Task definitions: Can have multiple tasks that can reference plugins defined ni the initConfig module

JavaScript properties Can define other JavaScript properties that can be accessible throughout the file

25/02/2016 Introduction to Grunt 4

Gruntfile.js (b)

Example file: Configures uglify and watch plugins

Loads the npm tasks

Registers a default task that: Runs watch plugin

Note watch: it runs uglify

Note: Uglify is installed: npm install grunt-contrib-uglify --save-dev

Watch is installed: npm install grunt-contrib-watch --save-dev You will notice new folders with these names in node_modules

Above commands must be run from your web project directory

25/02/2016 Introduction to Grunt 5

Configuring Plugins

Plugins allow you to do interesting work in Grunt

List is available on http://gruntjs.com/plugins

Steps to using plugin: Install plugin in your web project – by running npm install <plugin> --save-dev

<plugin> value is found on the site above inside the feature.

Update initConfig object (more on next slide)

Load the plugin task so it is recognized by Grunt – by using grunt.loadNpmTasks

Associate it to one of our tasks (in registerTask) (optional depending on the task you are working on ).

25/02/2016 Introduction to Grunt 6

initConfig (a)

Passed an empty object

You populate this object to configure tasks.

Example (screenshot on left): uglify is a task

Task contains target (any text) Can have multiple targets in a task You can call target by passing to task such as : uglify:all Task and targets can have options object

Options is documented for each task on Grunt site: Example for uglify: https://www.npmjs.com/package/grunt-contrib-uglify Options is under Options section. Sometimes properties prefixed with Options in the

documentation

25/02/2016 Introduction to Grunt 7

initConfig (b)

Each task can reference files as follows: Reference to source:

Use any of the format on the right

For example: uglify needs to know what files to uglify

Reference to destination: Same as above, except we use keyword ‘dest’

Note: More information on:

http://gruntjs.com/configuring-tasks

Can use wildcards: /abc/**/*.js all .js files in all directories within abc, /abc/*.js all .js files in the abc directory

25/02/2016 Introduction to Grunt 8

initConfig (c)

Each task or target can have options Target options overwrite task options

Some options don’t work on targets, refer to plugin documentation

Options object properties are all documented online

Example: In this example, target ‘all’ has options defined

Banner and sourceMap defined on plugin doc: https://www.npmjs.com/package/grunt-contrib-uglify

25/02/2016 Introduction to Grunt 9

Register Tasks

Remember: you must first install plugin. (Check configure plugins slide)

Load the installed plugin: Use grunt.loadNpmTasks(“plugin-name-here”);

This makes the task available for us to use in our Gruntfile.js

Register tasks that we can run from command line Use grunt.registerTask(<taskname>,[‘task1’ , ‘task2’]);

Use ‘default’ if you want to run the task from command line without passing any parameters

25/02/2016 Introduction to Grunt 10

Run the task

Open command line/terminal and browse to the web project folder

Type: grunt : runs default task. This will run all tasks associate with the default

registered task

grunt <customtask>: Runs task that is not default. Example: grunt test

This will run our ‘mocha’ plugin task if we have one

Note: You can always run a specific target of the task such as: Grunt.registerTask(‘default’, [‘uglify:all’]);

If we had more than one target, only all target would run.

25/02/2016 Introduction to Grunt 11

Summary

Grunt: Requires Note.js

It has plugins that are well documented online

Requires plugins to be installed

initCongif allows plugin configuration

registerNpmTasks registers our plugin to be accessible to Gruntfile.js

registerTask allows us to specify command line arguments for grun that will run specific (or a set of) tasks.

Grunt makes developer life easy

25/02/2016 Introduction to Grunt 12