Skip to main content

15 Best GruntJs Interview Questions and Answers

What Is Grunt js?
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.
Companies that use Gruntjs - Adobe Systems, jQuery, Twitter, Mozilla, Bootstrap, Cloudant, Opera, WordPress, Walmart, and Microsoft

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 taskstack.


By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS