What Is Grunt js?
Gruntjs was created by Ben Alman and Gruntjs is written in Node.js in Sept 2016.
Gruntjs is basically a helping tool that main aims to cut down the code. Basically, it is used when there is a need to call the functional or similar tasks again and again.
There were more than 6,000 plugins available in the Grunt ecosystem.
Companies that use Gruntjs - Adobe Systems,
jQuery, Twitter, Mozilla, Bootstrap, Cloudant, Opera, WordPress, Walmart, and
Microsoft
Gruntjs is a JavaScript task runner and it used
to automate tasks like magnification, compilation, concat, unit testing, and
checking js errors. It uses CLI (Command Line Interface) to run custom tasks.
Gruntjs was created by Ben Alman and Gruntjs is written in Node.js in Sept 2016.
Gruntjs is basically a helping tool that main aims to cut down the code. Basically, it is used when there is a need to call the functional or similar tasks again and again.
There were more than 6,000 plugins available in the Grunt ecosystem.
Why Use a Task Runner?
A task runner can do most of your works with zero
effort. All task runners have the following properties -
1. Consistency
2. Effectiveness
3. Efficiency
4. Repeatability
5. and
so on
How to Install and use Grunt.js?
The multiple Steps involves to install and use
Grunt.js -
1. Install
Node.js and Grunt.
2. Create
package.json and list dependencies (Grunt and plugins).
3. Install
NPM modules.
4. Create
Gruntfile.js.
5. Configure
tasks you need to run.
6. Run
those tasks in the command line while you work.
Grunt Global Object -
module.exports
= function(grunt)
{
//todo -grunt functions.
};
Example -
module.exports
= function(grunt)
{
// Task configuration
grunt.initConfig({
task1: 'Task
config1',
task2: 'Task
config2'
});
// Loads plugins
grunt.loadNpmTasks('bower-clean');
grunt.loadNpmTasks('contrib-uglify');
grunt.loadNpmTasks('contrib-htmlmin');
// Custom tasks
grunt.registerTask('custom-task1',
'The task description',
function(taskParam)
{
// Custom statements here.
});
// Combining multiple tasks to a single task.
grunt.registerTask('custom-task2',
['task1, custom-task1']);
// Default task - runs, if task name is not
specified.
grunt.registerTask('default',
['custom-task2']);
};
Why To Use Gruntjs?
Grunt has become very popular and has tons of
plugins to choose from. These plugins are great assets for any app to automate
various things with minimum efforts.
How do you install Grunt?
npm
install grunt
--save-dev
How do you uninstall Grunt?
For uninstall grunt -
npm
uninstall grunt
OR
For remove it from package.json -
npm
uninstall --save-dev
grunt
How do you setup/configure Grunt?
Once you installed Gruntjs, firstly you need to
add 2 files (package.json and Gruntfile) to setup and these specific files need
to be created in the root directory, which are package.json and a Gruntfile.
package.json
-This file is used by npm to store metadata for projects published as npm
modules.
Gruntfile
-This name of the file is Gruntfile.js and used to configure the tasks and load
Grunt plugins.
Is it possible to check JS errors with the help of Grunt?
Yes, it can simply be done.
Is it possible to run the multiple tasks together in Grunt?
Yes, this can be done. This approach helps
developer's lots of time.
What Are the Advantages?
Some of the Advantages of using Gruntjs -
1. Access
too many predefined plugins that can be used to work with JavaScript tasks and
on static content.
2. All
task runners have the following properties: consistency, effectiveness,
efficiency, repeatability, etc.
3. Allows
users to customize tasks using predefined plugins
4. Prefers
the configuration approach to coding
5. Allows
users to add their own plugins and publish them to npm.
Which Are the most used Gruntjs plugins?
The lists of Plugins are -
1. babel
- Use next generation JavaScript, today
2. contrib-copy
- Copy files and folders.
3. benchmark-
Grunt task for benchmarking
4. bower-clean
- Remove files (e.g. docs, tests, etc.) from installed bower components
5. watch
-Run predefined tasks whenever watched file patterns are added, changed or
deleted.
6. jshint-
Validate files with JSHint
7. contrib-requirejs
- Optimize RequireJS projects using r.js
8. contrib-uglify-
Minify files with UglifyJS
9. contrib-jade
-Compile Jade templates
10. concat-
Concatenate files.
11. css-url-embed-
Embed URL's as base64 strings inside your stylesheets
12. contrib-
Precompile Underscore templates to JST file
13. contrib-HTMLmin-
Minify HTML
14. cssmin-
Minify CSS
15. contrib-less-
Compile LESS files to CSS
16. And
many more
How do we load grunt plugins in Gruntfile.js?
The grunt.loadNpmTasks()
function is used for loading grunt
plugins and before loading grunt plugins, you must ensure that these plugins
are already installed or not via npm.
// Loads plugins
grunt.loadNpmTasks('bower-clean');
grunt.loadNpmTasks('contrib-uglify');
grunt.loadNpmTasks('contrib-htmlmin');
The example looks like –
module.exports
= function(grunt)
{
// Task configuration
grunt.initConfig({
task1: 'Task
config1',
task2: 'Task
config2'
});
// Loads plugins
grunt.loadNpmTasks('bower-clean');
grunt.loadNpmTasks('contrib-uglify');
grunt.loadNpmTasks('contrib-htmlmin');
// Custom tasks
grunt.registerTask('custom-task1',
'The task description',
function(taskParam)
{
// Custom statements here.
});
// Combining multiple tasks to a single task.
grunt.registerTask('custom-task2',
['task1, custom-task1']);
// Default task - runs, if task name is not
specified.
grunt.registerTask('default',
['custom-task2']);
};
What is the difference between
--save and --save-dev?
What Are Grunt modules/plugins?
Grunt modules are distributed through Node’s NPM
directory. Normally, they are prefixed with grunt- and official grunt plugins
are prefixed with grunt-contrib.
How to get a stack trace when an error occurs?
Use the --stack
option to see stack traces.
And it looks like –
grunt
task –stack.