Grunt Javascript Task Runner
Posted By : Amit Kumar Gupta | 29-Jun-2017
Grunt is a javascript task runner. Task runner is used to when performing repetitive task like compilation,unit testing,minification etc.It is written in Node.js.Grunt uses a command line Interface(CLI).Grunt's CLI can be installed by through npm. We can execute the grunt command locally installed in the current directory.And we can keep the different versions of grunt in system and execute different versions as we want. For using Grunt in any project, we need two files in root directory i.e. package.json, Gruntfile.
package.json: package.json is used by npm.It is used to store metadata for projects published as npm modules. We will list grunt and the Grunt plugins your project needs as devDependencies in this file.
Gruntfile: This file is named as Gruntfile.js or Gruntfile.coffee and It is used to configure or define tasks and load Grunt plugins. It comprised of following parts.
i)'Wrapper' function.
ii)Task configuration.
iii)Loading Grunt plugins and task.
Ex-
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
It is similar to ANT which is for build dependency in java.
Some Grunt plugins are-:
1)Angular js project need minification."grunt-contrib-uglify" plugins is used for minification.
2)When we save our code or change in code. These changes reflect by automatically reload the website with the help of "live reload" plugin.
3)"grunt-contrib-proxy, grunt-contrib-connect" plugins is used for setup proxy and connect frontened to backend rest api.
Install the latest version of Grunt in our project folder with the help of these command.
npm install grunt --save-dev
Install the Grunt plugins with the help of these command.
npm install grunt-contrib-jshint --save-dev
Simply add grunt and grunt plugins in package.json is with write command npm install <module> with --save -dev.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Amit Kumar Gupta
Amit is a bright Web App Developer, and has good knowledge of Java,Machine Learning, Python, Algorithm. His hobbies are playing badminton and reading novel.