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 task –stack.


Labels

Labels:
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 SALVA...
Read more

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from ...
Read more

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 ...
Read more

How To convert JSON Object to String?

To convert JSON Object to String - To convert JSON Object to String in JavaScript using “JSON.stringify()”. Example – let myObject =[ 'A' , 'B' , 'C' , 'D' ] JSON . stringify ( myObject ); ü   Stayed Informed –   Object Oriented JavaScript Interview Questions I hope you are enjoying with this post! Please share with you friends!! Thank you!!!
Read more

Cache Busting with Angular and Angular CLI

Cache Busting -  Run the below command in your project directory - ng build -- prod The above command is used to enable cache busting by default with Angular CLI. This command can take a few minutes based on your project size. Stayed Informed – Angular 4 and Angular 5 Documents Steps for Cache busting with Angular and Angular CLI - ·          C:\Users\Viaindia>d: ·          D:\>cd Angular ·          D:\Angular>cd PipeApps ·          D:\Angular\PipeApps>ng serve --open ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **  10% building modules 8/10 modules 2 active ...e}!D:\Angular\PipeApps\src\styles.csswebpack: wait until bundle finished: /            ...
Read more