Grunt Interview Questions & Answers

Grunt Interview Questions

Do you like to switch your career? Here's our recommendation on the important things to need to prepare for the job interview to achieve your career goals in an easy way. Grunt is the tool that runs automatically to compile, unit test and for lint. All the commands are written in a file and is executed using command-line interface. It is easy to learn and implement. Demand to this technology is increasing every day. There is huge demand for jobs related to Grunt anywhere. One can check the availability of the job across cities including Mumbai, Delhi, Bangalore, Pune and Hyderabad. It is a permanent job. Follow Wisdomjobs page for Grunt job interview questions and answers page to get through your job interview successfully.

Grunt Interview Questions And Answers

Grunt Interview Questions
    1. Question 1. What Is Grunt?

      Answer :

      Grunt is a JavaScript task runner, which can automate tasks like minification, compilation, unit testing, checking js errors. Once configured, one doesn’t have to worry about these tasks.

    2. Question 2. Why To Use Grunt?

      Answer :

      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.

    3. Question 3. How Do You Install Grunt?

      Answer :

      Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. To install grunt, first ensure the npm is installed properly. And then run following command.

      1. npm install grunt --save-dev

      Please note, --save-dev is optional.

    4. Question 4. How Do You Setup/configure Grunt?

      Answer :

      Once installed, you need to add 2 files to setup Grunt.

      1. package.json: This file is used by npm to store metadata for projects published as npm modules. So basically, there will be list of all Grunt plugins, along with grunt which your project is using.

      2. Gruntfile: This file is named Gruntfile.js and is used to configure or define tasks and load Grunt plugins.

    5. Question 5. What Is --save-dev Option While Installing The Grunt?

      Answer :

      As mentioned in previous answer that “package.json” file holds the metadata for grunt plugins. So when grunt is installed using --save-dev option, the metadata is added to package.json. So you don’t have to add it manually. And this is how your package.json will look like,

      1. {
      2.   "name": "my-project-name",
      3.   "version": "0.1.0",
      4.   "devDependencies": {
      5.     "grunt": "~0.4.5",
      6.     "grunt-contrib-jshint": "~0.10.0",
      7.     "grunt-contrib-nodeunit": "~0.4.1",
      8.     "grunt-contrib-uglify": "~0.5.0"
      9.   }
      10. }

    6. Question 6. What Is The Difference Between --save And --save-dev?

      Answer :

      Before will look at the difference, it is important to understand the difference between dependencies and devDependencies.

      devDependencies are for the development-related scripts, e.g. unit testing, packaging scripts, documentation generation, etc. where dependencies are required for production use, and assumed required for dev as well. As for example, you can include some plugin which you require during development like (for debugging or unit testing) but you don’t need them on production.

      So --save adds packages under dependencies and --save-dev adds under devdependencies section.

      1. {
      2.   "name": "my-project-name",
      3.   "version": "0.1.0",
      4.   "dependencies": {
      5.     "grunt": "~0.4.5",
      6.     "grunt-contrib-nodeunit": "~0.4.1",
      7.     "grunt-contrib-uglify": "~0.5.0"
      8.   }
      9.   "devDependencies": {
      10.     "grunt": "~0.4.5",
      11.     "grunt-contrib-jshint": "~0.10.0",
      12.   }
      13. }

    7. Question 7. What Does ~ (tilde) Sign Means In Package.json?

      Answer :

      In the simplest terms, the tilde matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0. The caret, on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0.

      You can also define the exact version number that you wish to use like “1.3.5” or to always use latest version, simply use latest or *.

    8. Question 8. What Are Grunt Modules/plugins?

      Answer :

      Grunt modules are distributed through Node’s NPM directory. Normally, they are prefixed with grunt- and official grunt plugins are prefixed with grunt-contrib. Example: grunt-contrib-uglify. You can get list of all grunt plugins here.

    9. Question 9. How Do You Install A Grunt Plugin?

      Answer :

      The syntax remains name but the only thing which changes is module/plugin name.

      1. npm install --save-dev

      For example, to install uglify plugin:

      1. npm install grunt-contrib-uglify --save-dev

      By default, it always installs the latest version available. But if you wish to install specific version then same you can include in the command.

      1. npm install @version --save-dev

    10. Question 10. How Do You Uninstall Grunt?

      Answer :

      Run following command to uninstall grunt.

      1. npm uninstall grunt

      And if you wish to remove it from package.json, then use --save-dev option.

      1. npm uninstall --save-dev grunt

    11. Question 11. What Is Grunt-cli?

      Answer :

      Grunt cli is command line interface to run grunt commands. In other words, it’s a tool to access Grunt from command line anywhere in the system. To install, grunt –cli execute following command

      npm install -g grunt-cli

      This will put the grunt command in your system path, allowing it to be run from any directory. Please note, that installing grunt-cli, doesn’t install grunt on your system.

      -g means global which means it adds to PATH variables of the system so that you can run grunt from anywhere (without going to specific folder on command prompt).

      The reason for having two components is to ensure that we can run different grunt versions side-by-side (i.e. legacy versions in older projects). Hence it is recommended to install grunt-cli globally while grunt should be installed on a per-project basis.

    12. Question 12. How Does Gruntfile.js Uses Package.json?

      Answer :

      Task configuration is specified in your Gruntfile via the grunt.initConfig method. Inside of grunt.initConfig(), we read the information from package.json and saved it to a pkg property. With this, we can use the attributes from our package.json file. We can call the name of our project using and the version with pkg.version.

      1. module.exports = function(grunt) {
      2.   grunt.initConfig({
      3.     pkg: grunt.file.readJSON('package.json')
      4.   });
      5. };

    13. Question 13. Where Do You Define Configuration Of Grunt Plugin?

      Answer :

      Grunt plugin configuration needs to be defined within grunt.initConfig method. See below sample code.

      1. module.exports = function(grunt) {
      2.   grunt.initConfig({
      3.     pkg: grunt.file.readJSON('package.json'),
      4.     concat: {
      5.     // concat task configuration goes here.
      6.     },
      7.    uglify: {
      8.     // uglify task configuration goes here.
      9.    }
      10.   });
      11. };

      Above code configures concat and uglify tasks.

    14. Question 14. Can You Override Default Settings Of A Plugin? If Yes, Then How?

      Answer :

      Yes, we can override. Inside a task configuration, an options property may be specified to override built-in defaults. In addition, each target may have an options property which is specific to that target.

      1. module.exports = function(grunt) {
      2.   grunt.initConfig({
      3.     pkg: grunt.file.readJSON('package.json'),
      4.     concat: {
      5.      options: {
      6.         separator: ';'
      7.       }
      8.     }
      9.   });
      10. };

    15. Question 15. What Is A Task In Grunt?

      Answer :

      Tasks are grunt’s bread and butter. Every time Grunt is run, you specify one or more tasks to run, which tells Grunt what you’d like it to do. See below code.

      1. grunt.initConfig({
      2.   concat: {
      3.     development: {
      4.       // concat task "development" target options and files go here.
      5.     },
      6.     production: {
      7.       // concat task "production" target options and files go here.
      8.     },
      9.   },
      10.   uglify: {
      11.     development: {
      12.       // uglify task "development" target options and files go here.
      13.     },
      14.   },
      15. });

      Here, there are 2 tasks defined concat and uglify. And for each task, we defined targets. For concat, there are 2 targets “development” and “production” and only “development” for uglify. Creating target allows us to define separate settings for different objectives. Here, we can have different option for development and production version. It’s not compulsory to define a target.

      Target’s can also have their own option parameters which will override the settings of options defined for the task.

    16. Question 16. How Do You Execute Grunt Task?

      Answer :

      You can execute the grunt task from command line. Remember, we have grunt command line interface. To execute contact module with grunt for all the tasks.

      grunt concat

      To execute task with particular target

      grunt concat:development

    17. Question 17. How Do We Load Grunt Plugins In Gruntfile.js?

      Answer :

      grunt.loadNpmTasks() is used for loading grunt plugins. Before loading, please ensure that these plugins are already installed via npm.


    18. Question 18. How To Run Multiple Tasks Together In Grunt?

      Answer :

      Every grunt module may have defined a task. But running them individually can make things difficult for developers. What is one wants to run grunt uglify and grunt jshint together

      Using grunt.registerTask(taskName, [description, ] taskList) we can group all the tasks under one roof. Task name can be anything of your choice, description is optional and task list is array of module tasks which you wish to execute. For example,

      grunt.registerTask('development', ['jshint:development', 'concat:development', 'uglify:development']);

      Above code creates a task named “development” and is asked to execute development target of “jshint”, “concat” and “uglify” packages. Similarly, you can register another task for production version.

      grunt.registerTask('production', ['jshint:production', 'concat:production', 'uglify:production']);

      Remember, you always need to define a default task.

      grunt.registerTask('default', ['jshint', 'uglify', 'concat']);

      Now, when you enter grunt on command prompt, it will execute the default task.

    19. Question 19. How To Get A Stack Trace When An Error Occurs?

      Answer :

      Use the --stack option to see stack traces. Such as grunt task –stack.

    20. Question 20. Which Are The Most Used Grunt Plugins?

      Answer :

      Though there are tons of plugins which you can use, but below are the most used.

      • watch: Run predefined tasks whenever watched file patterns are added, changed or deleted.
      • jshint: Validate files with JSHint
      • uglify: Minify files with UglifyJS
      • concat: Concatenate files.
      • cssmin: Minify CSS
      • less: Compile LESS files to CSS.

      Below is a sample gruntfile.js for your reference.

      1. module.exports = function(grunt) {
      2.   grunt.initConfig({
      3.     pkg: grunt.file.readJSON('package.json'),
      4.     concat: {
      5.       options: {
      6.         separator: ';'
      7.       },
      8.       dist: {
      9.         src: ['src/**/*.js'],
      10.         dest: 'dist/<%= %>.js'
      11.       }
      12.     },
      13.     uglify: {
      14.       options: {
      15.         banner: '/*! <%= %> <%="dd-mm-yyyy") %> */n'
      16.       },
      17.       dist: {
      18.         files: {
      19.           'dist/<%= %>.min.js': ['<%= concat.dist.dest %>']
      20.         }
      21.       }
      22.     },
      23.     jshint: {
      24.       files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      25.       options: {
      26.         // options here to override JSHint defaults
      27.         globals: {
      28.           jQuery: true,
      29.           console: true,
      30.           module: true,
      31.           document: true
      32.         }
      33.       }
      34.     }
      35.   });
      36.   grunt.loadNpmTasks('grunt-contrib-uglify');
      37.   grunt.loadNpmTasks('grunt-contrib-jshint');
      38.   grunt.loadNpmTasks('grunt-contrib-concat');
      39.   grunt.registerTask('test', ['jshint']);
      40.   grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
      41. };

    21. Question 21. What Is Grunt Js?

      Answer :

      • Grunt js 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.
      • Grunt js was created by Ben Alman and Gruntjs is written in Node.js in Sept 2016.
      • Grunt js 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.

    22. Question 22. Why Use A Task Runner?

      Answer :

      A task runner can do most of your works with zero effort. All task runners have the following properties:

      • Consistency
      • Effectiveness
      • Efficiency
      • Repeatability
      • and so on

    23. Question 23. How To Install And Use Grunt.js?

      Answer :

      The multiple Steps involves to install and use Grunt.js:

      • Install Node.js and Grunt.
      • Create package.json and list dependencies (Grunt and plugins).
      • Install NPM modules.
      • Create Gruntfile.js.
      • Configure tasks you need to run.
      • Run those tasks in the command line while you work.

    24. Question 24. Why To Use Grunt Js?

      Answer :

      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.

    25. Question 25. Is It Possible To Check Js Errors With The Help Of Grunt?

      Answer :

      Yes, it can simply be done.

    26. Question 26. Is It Possible To Run The Multiple Tasks Together In Grunt?

      Answer :

      Yes, this can be done. This approach helps developer's lots of time.

    27. Question 27. What Are The Advantages?

      Answer :

      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.

    28. Question 28. Which Are The Most Used Gruntjs Plugins?

      Answer :

      The lists of Plugins are:

      • babel - Use next generation JavaScript, today
      • contrib-copy - Copy files and folders.
      • benchmark- Grunt task for benchmarking
      • bower-clean - Remove files (e.g. docs, tests, etc.) from installed bower components
      • watch -Run predefined tasks whenever watched file patterns are added, changed or deleted.
      • jshint- Validate files with JSHint
      • contrib-requirejs - Optimize RequireJS projects using r.js
      • contrib-uglify- Minify files with UglifyJS
      • contrib-jade -Compile Jade templates
      • concat- Concatenate files.
      • css-url-embed- Embed URL's as base64 strings inside your stylesheets
      • contrib- Precompile Underscore templates to JST file
      • contrib-HTMLmin- Minify HTML
      • cssmin- Minify CSS
      • contrib-less- Compile LESS files to CSS
      • And many more

Popular Interview Questions

All Interview Questions

All Practice Tests

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Grunt Tutorial