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