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.
0 comments:
Post a Comment