Grunt is a JavaScript Task Runner. Any task runner is used for automating the repetitive tasks to increase productivity and efficiency.
Some of the automated tasks include
- Implement standards
- Unit Testing
- End to end testing
- Compiling
- Automated task execution
- File watching
Grunt is a command line tool available on the node platform. Once you have installed node, you would need to run the following command to make grunt command line available in your project.
npm install -g grunt-cli
To run grunt commands we would also require to create a Gruntfile.js because depending on the make of the grunt tool it looks for this file. Once we have this file then we could configure tasks inline, load tasks from external sources (files and modules), etc.
It’s always easy for me when I do some hand on so that’s what we would do. Create a new file named Gruntfile.js and add the following code to it.
// Code example to automate minification of an existing javascript file
module.exports = function(grunt) {
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Project configuration
grunt.initConfig({
uglify: {
target1: {
src: 'jquery-2.1.4.js',
dest: 'jquery-2.1.4.min.js'
}
}
});
// Define the default task. 'default' is the alias to 'uglify'
grunt.registerTask('default', ['uglify']);
}
Now move the folder where you created the Gruntfile.js and add a new file named as package.json. We will add the package that we care about which is uglify.
{
"devDependencies": {
"grunt-contrib-uglify": "^0.9.1"
}
}
Download jQuery.version.js file or any other JavaScript that you would want to minify and add to the same folder
Now run the following command in your command line tool
- npm install -g grunt-cli
$ npm install -g grunt-cli C:\Users\cshukla\AppData\Roaming\npm\grunt -> C:\Users\cshukla\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt grunt-cli@0.1.13 C:\Users\cshukla\AppData\Roaming\npm\node_modules\grunt-cli ├── resolve@0.3.1 ├── nopt@1.0.10 (abbrev@1.0.5) └── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
- npm init – fills all details is package.json
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (FirstGruntTask)
version: (1.0.0)
description:
entry point: (Gruntfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to c:\FirstGruntTask\package.json:
{
"devDependencies": {
"grunt-contrib-uglify": "^0.9.1"
},
"name": "FirstGruntTask",
"version": "1.0.0",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
- npm install grunt (for grunt dependencies.)
$ npm install grunt npm WARN package.json FirstGruntTask@1.0.0 No description npm WARN package.json FirstGruntTask@1.0.0 No repository field. npm WARN package.json FirstGruntTask@1.0.0 No README data grunt@0.4.5 node_modules\grunt ├── dateformat@1.0.2-1.2.3 ├── which@1.0.9 ├── eventemitter2@0.4.14 ├── getobject@0.1.0 ├── colors@0.6.2 ├── rimraf@2.2.8 ├── async@0.1.22 ├── hooker@0.2.3 ├── grunt-legacy-util@0.2.0 ├── exit@0.1.2 ├── nopt@1.0.10 (abbrev@1.0.5) ├── lodash@0.9.2 ├── coffee-script@1.3.3 ├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.6.2) ├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3) ├── underscore.string@2.2.1 ├── iconv-lite@0.2.11 ├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.2) ├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.2) └── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)
- npm install
$ npm install npm WARN package.json FirstGruntTask@1.0.0 No description npm WARN package.json FirstGruntTask@1.0.0 No repository field. npm WARN package.json FirstGruntTask@1.0.0 No README data grunt-contrib-uglify@0.9.1 node_modules\grunt-contrib-uglify ├── uri-path@0.0.2 ├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1) ├── uglify-js@2.4.21 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.5.4, source-map@0.1.34) ├── maxmin@1.1.0 (figures@1.3.5, pretty-bytes@1.0.4, gzip-size@1.0.0) └── lodash@3.8.0
- grunt
$ grunt Running "uglify:target1" (uglify) task >> 1 file created. Done, without errors.
And boom we have created our first Grunt automated task to minify a JavaScript file.
You can download the source code @googledrive or @onedrive
