Top 100+ Grunt Interview Questions And Answers
Question 1. What Is Grunt?
Answer :
Grunt is a JavaScript challenge runner, that can automate obligations like minification, compilation, unit trying out, checking js errors. Once configured, one doesn’t have to worry approximately those tasks.
Question 2. Why To Use Grunt?
Answer :
Grunt has come to be very famous and has tons of plugins to pick out from. These plugins are notable assets for any app to automate diverse things with minimum efforts.
HTML five Interview Questions
Question three. How Do You Install Grunt?
Answer :
Grunt and Grunt plugins are set up and managed via npm, the Node.Js bundle manager. To set up grunt, first make sure the npm is installed properly. And then run following command.
Npm set up grunt --keep-dev
Please notice, --store-dev is non-compulsory.
Question four. How Do You Setup/configure Grunt?
Answer :
Once installed, you want to feature 2 files to setup Grunt.
1. Package.Json: This record is used by npm to keep metadata for tasks published as npm modules. So basically, there might be listing of all Grunt plugins, at the side of grunt which your venture is the use of.
2. Gruntfile: This document is known as Gruntfile.Js and is used to configure or outline tasks and cargo Grunt plugins.
HTML five Tutorial
Question 5. What Is --shop-dev Option While Installing The Grunt?
Answer :
As noted in previous solution that “package deal.Json” file holds the metadata for grunt plugins. So while grunt is set up the use of --save-dev alternative, the metadata is introduced to package.Json. So you don’t must upload it manually. And this is how your package deal.Json will seem like,
"call": "my-venture-name",
"model": "zero.1.Zero",
"devDependencies":
"grunt": "~zero.Four.5",
"grunt-contrib-jshint": "~0.10.Zero",
"grunt-contrib-nodeunit": "~zero.Four.1",
"grunt-contrib-uglify": "~0.Five.0"
AJAX Interview Questions
Question 6. What Is The Difference Between --store And --store-dev?
Answer :
Before will examine the difference, it's far crucial to recognize the difference between dependencies and devDependencies.
DevDependencies are for the improvement-related scripts, e.G. Unit checking out, packaging scripts, documentation technology, and so forth. Where dependencies are required for manufacturing use, and assumed required for dev as well. As as an instance, you can consist of some plugin which you require for the duration of improvement like (for debugging or unit testing) however you don’t want them on production.
So --store provides programs underneath dependencies and --shop-dev adds beneath devdependencies segment.
"call": "my-assignment-call",
"version": "zero.1.Zero",
"dependencies":
"grunt": "~zero.Four.Five",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~zero.Five.0"
"devDependencies":
"grunt": "~zero.Four.Five",
"grunt-contrib-jshint": "~0.10.0",
Question 7. What Does ~ (tilde) Sign Means In Package.Json?
Answer :
In the simplest phrases, the tilde matches the most recent minor version (the middle wide variety). ~1.2.Three will suit all 1.2.X variations however will omit 1.Three.0. The caret, on the other hand, is greater relaxed. It will update you to the maximum current important model (the first variety). ^1.2.Three will healthy any 1.X.X launch along with 1.Three.0, however will keep off on 2.0.Zero.
You also can outline the exact model range which you wish to use like “1.3.5” or to always use brand new version, without a doubt use modern day or *.
AJAX Tutorial Angular JS Interview Questions
Question 8. What Are Grunt Modules/plugins?
Answer :
Grunt modules are distributed through Node’s NPM listing. Normally, they're prefixed with grunt- and legit grunt plugins are prefixed with grunt-contrib. Example: grunt-contrib-uglify. You can get listing of all grunt plugins here.
Question nine. How Do You Install A Grunt Plugin?
Answer :
The syntax remains call however the most effective factor which changes is module/plugin name.
Npm install --save-dev
For example, to put in uglify plugin:
npm installation grunt-contrib-uglify --shop-dev
By default, it usually installs the present day model to be had. But if you wish to install particular model then equal you may encompass inside the command.
Npm installation @model --save-dev
Bootstrap Interview Questions
Question 10. How Do You Uninstall Grunt?
Answer :
Run following command to uninstall grunt.
Npm uninstall grunt
And if you want to eliminate it from package.Json, then use --save-dev choice.
Npm uninstall --save-dev grunt
Bootstrap Tutorial
Question eleven. What Is Grunt-cli?
Answer :
Grunt cli is command line interface to run grunt commands. In other words, it’s a device to get entry to Grunt from command line everywhere inside the system. To installation, grunt –cli execute following command
npm deploy -g grunt-cli
This will placed the grunt command on your gadget route, permitting it to be run from any listing. Please notice, that putting in grunt-cli, doesn’t deploy grunt in your device.
-g method worldwide this means that it provides to PATH variables of the device so that you can run grunt from anywhere (without going to specific folder on command activate).
The cause for having additives is to make certain that we are able to run extraordinary grunt variations facet-through-side (i.E. Legacy variations in older tasks). Hence it's far endorsed to install grunt-cli globally even as grunt need to be hooked up on a according to-mission foundation.
Java Abstraction Interview Questions
Question 12. How Does Gruntfile.Js Uses Package.Json?
Answer :
Task configuration is laid out in your Gruntfile thru the grunt.InitConfig method. Inside of grunt.InitConfig(), we read the statistics from package deal.Json and stored it to a pkg belongings. With this, we can use the attributes from our bundle.Json report. We can name the name of our project the use of pkg.Call and the version with pkg.Model.
Module.Exports = function(grunt)
grunt.InitConfig(
pkg: grunt.File.ReadJSON('package deal.Json')
);
;
HTML five Interview Questions
Question thirteen. Where Do You Define Configuration Of Grunt Plugin?
Answer :
Grunt plugin configuration needs to be described within grunt.InitConfig technique. See beneath pattern code.
Module.Exports = function(grunt)
grunt.InitConfig(
pkg: grunt.Record.ReadJSON('package deal.Json'),
concat:
// concat undertaking configuration goes here.
,
uglify:
// uglify mission configuration goes right here.
);
;
Above code configures concat and uglify tasks.
Javascript Advanced Tutorial
Question 14. Can You Override Default Settings Of A Plugin? If Yes, Then How?
Answer :
Yes, we are able to override. Inside a task configuration, an options property may be special to override built-in defaults. In addition, each target may additionally have an alternatives assets which is unique to that focus on.
Module.Exports = characteristic(grunt)
grunt.InitConfig(
pkg: grunt.Report.ReadJSON('bundle.Json'),
concat:
options:
separator: ';'
);
;
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 extra responsibilities to run, which tells Grunt what you’d love it to do. See under code.
Grunt.InitConfig(
concat:
development:
// concat challenge "development" target alternatives and documents cross right here.
,
production:
// concat undertaking "manufacturing" target alternatives and documents pass here.
,
,
uglify:
improvement:
// uglify mission "improvement" goal alternatives and documents move here.
,
,
);
Here, there are 2 tasks defined concat and uglify. And for each task, we described targets. For concat, there are 2 targets “improvement” and “manufacturing” and most effective “development” for uglify. Creating goal lets in us to outline separate settings for specific targets. Here, we will have exclusive alternative for development and production version. It’s no longer compulsory to define a target.
Target’s also can have their own alternative parameters so one can override the settings of alternatives defined for the venture.
Javascript Advanced Interview Questions
Question 16. How Do You Execute Grunt Task?
Answer :
You can execute the grunt undertaking from command line. Remember, we've got grunt command line interface. To execute contact module with grunt for all the obligations.
Grunt concat
To execute undertaking with unique target
grunt concat:improvement
Angular 2 Tutorial
Question 17. How Do We Load Grunt Plugins In Gruntfile.Js?
Answer :
grunt.LoadNpmTasks() is used for loading grunt plugins. Before loading, please make certain that these plugins are already set up through npm.
Grunt.LoadNpmTasks('grunt-contrib-uglify');
Angular 2 Interview Questions
Question 18. How To Run Multiple Tasks Together In Grunt?
Answer :
Every grunt module may additionally have defined a assignment. But strolling them in my view can make things hard for developers. What is one desires to run grunt uglify and grunt jshint together
Using grunt.RegisterTask(taskName, [description, ] taskList) we will group all the tasks beneath one roof. Task call may be anything of your desire, description is elective and task listing is array of module responsibilities which you desire to execute. For instance,
grunt.RegisterTask('development', ['jshint:development', 'concat:development', 'uglify:development']);
Above code creates a assignment named “improvement” and is requested to execute development goal of “jshint”, “concat” and “uglify” applications. Similarly, you may sign in some other assignment for manufacturing model.
Grunt.RegisterTask('manufacturing', ['jshint:production', 'concat:production', 'uglify:production']);
Remember, you constantly need to define a default assignment.
Grunt.RegisterTask('default', ['jshint', 'uglify', 'concat']);
Now, when you input grunt on command prompt, it's going to execute the default venture.
AJAX Interview Questions
Question 19. How To Get A Stack Trace When An Error Occurs?
Answer :
Use the --stack option to see stack traces. Such as grunt venture –stack.
ReactJS Tutorial
Question 20. Which Are The Most Used Grunt Plugins?
Answer :
Though there are lots of plugins which you can use, however under are the most used.
Watch: Run predefined responsibilities each time watched record styles are added, modified or deleted.
Jshint: Validate documents with JSHint
uglify: Minify documents with UglifyJS
concat: Concatenate documents.
Cssmin: Minify CSS
less: Compile LESS files to CSS.
Below is a pattern gruntfile.Js on your reference.
Module.Exports = feature(grunt)
grunt.InitConfig(
pkg: grunt.Document.ReadJSON('package deal.Json'),
concat:
alternatives:
separator: ';'
,
dist:
src: ['src/**/*.Js'],
dest: 'dist/<%= pkg.Name %>.Js'
,
uglify:
options:
banner: '/*! <%= pkg.Name %> <%= grunt.Template.Today("dd-mm-yyyy") %> */n'
,
dist:
documents:
'dist/<%= pkg.Name %>.Min.Js': ['<%= concat.Dist.Dest %>']
,
jshint:
documents: ['Gruntfile.Js', 'src/**/*.Js', 'test/**/*.Js'],
options:
// alternatives right here to override JSHint defaults
globals:
jQuery: actual,
console: genuine,
module: real,
report: authentic
);
grunt.LoadNpmTasks('grunt-contrib-uglify');
grunt.LoadNpmTasks('grunt-contrib-jshint');
grunt.LoadNpmTasks('grunt-contrib-concat');
grunt.RegisterTask('take a look at', ['jshint']);
grunt.RegisterTask('default', ['jshint', 'concat', 'uglify']);
;
ReactJS Interview Questions
Question 21. What Is Grunt Js?
Answer :
Grunt js is a JavaScript challenge runner and it used to automate obligations like magnification, compilation, concat, unit checking out, and checking js mistakes. It uses CLI (Command Line Interface) to run custom duties.
Grunt js was created via Ben Alman and Gruntjs is written in Node.Js in Sept 2016.
Grunt js is essentially a supporting device that principal targets to reduce down the code. Basically, it's far used while there is a want to name the useful or similar duties again and again.
There have been extra than 6,000 plugins to be had in the Grunt surroundings.
Companies that use Gruntjs - Adobe Systems, jQuery, Twitter, Mozilla, Bootstrap, Cloudant, Opera, WordPress, Walmart, and Microsoft.
Question 22. Why Use A Task Runner?
Answer :
A task runner can do maximum of your works with zero effort. All task runners have the subsequent homes:
Consistency
Effectiveness
Efficiency
Repeatability
and so forth
JAVA Persistence API (JPA) Tutorial
Question 23. How To Install And Use Grunt.Js?
Answer :
The multiple Steps entails to put in and use Grunt.Js:
Install Node.Js and Grunt.
Create package deal.Json and list dependencies (Grunt and plugins).
Install NPM modules.
Create Gruntfile.Js.
Configure obligations you need to run.
Run the ones duties inside the command line at the same time as you work.
JQuery Mobile Interview Questions
Question 24. Why To Use Grunt Js?
Answer :
Grunt has grow to be very famous and has lots of plugins to choose from. These plugins are extremely good belongings for any app to automate diverse things with minimal efforts.
Angular JS Interview Questions
Question 25. Is It Possible To Check Js Errors With The Help Of Grunt?
Answer :
Yes, it is able to really be achieved.
Question 26. Is It Possible To Run The Multiple Tasks Together In Grunt?
Answer :
Yes, this will be completed. This method enables developer's masses of time.
Advanced jQuery Interview Questions
Question 27. What Are The Advantages?
Answer :
Some of the Advantages of using Gruntjs:
1.Access too many predefined plugins that may be used to work with JavaScript duties and on static content.
2.All mission runners have the following residences: consistency, effectiveness, performance, repeatability, and so on.
Three.Allows users to personalize tasks the use of predefined plugins
four.Prefers the configuration technique to coding
five.Allows customers to add their very own plugins and submit them to npm.
Bootstrap Interview Questions
Question 28. Which Are The Most Used Gruntjs Plugins?
Answer :
The lists of Plugins are:
babel - Use next technology JavaScript, these days
contrib-replica - Copy files and folders.
Benchmark- Grunt project for benchmarking
bower-easy - Remove documents (e.G. Doctors, exams, and so on.) from installed bower additives
watch -Run predefined tasks whenever watched file styles are introduced, modified or deleted.
Jshint- Validate files with JSHint
contrib-requirejs - Optimize RequireJS tasks 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 inner your stylesheets
contrib- Precompile Underscore templates to JST report
contrib-HTMLmin- Minify HTML
cssmin- Minify CSS
contrib-less- Compile LESS files to CSS
And many extra
