Interview Questions.

Question 1. What Is Gulp?

Answer :

Gulp is a build machine and JavaScript task runner which could automate common duties of any website like minification, checking js mistakes, bundling of various js and css documents, compile SASS, optimize pictures, create sprites, concatenate files and lots of extra.

Question 2. Is Gulp Based On Node.Js?

Answer :

Yes. Gulp is primarily based on node.Js.

Shell Scripting Interview Questions
Question 3. Why To Use Gulp?

Answer :

Though gulp isn't a great deal vintage but it is turning into very famous. It’s faster than grunt and efficient as properly. It prefers code over configuration approach, and makes use of energy of node streams to offers you speedy build. Many tech giants are already favoring Gulp like microsoft. Though they do assist Grunt, however Gulp is their first choice.

Question four. How Do You Install Gulp?

Answer :

Gulp and gulp plugins are installed and managed thru npm, the Node.Js package deal supervisor. To deploy gulp, first make certain the npm is hooked up nicely. And then run following command to install gulp globally in your machine.

1    npm installation --worldwide gulp       ?

And additionally set up gulp to your project devDependencies:

1      npm install --store-dev gulp          ?

--store-dev alternative writes devDependencies to “package.Json”. Please ensure while you run this command, your package.Json is created. If not create, then use npm init command to create this file.

Shell Scripting Tutorial
Question 5. How Do You Setup/configure Gulp?

Answer :

Once installed, you want to add 2 files to setup gulp.

1. Bundle.Json: This file is utilized by npm to store metadata for projects published as npm modules. So essentially, there can be list of all gulp plugins, along with gulp which your undertaking is the use of.

2. Gulpfile.Js: This is in which magic occurs. This is the region in which we define what automation needs to be carried out and whilst you need that to take place.

CSS3 Interview Questions
Question 6. What Are Gulp Plugins And How Do You Install A Gulp Plugin?

Answer :

A plugin is not anything but a reusable piece of code. Somebody has already made it and distributed to the world to apply it, so that you don’t need to code once more. It saves a while. Gulp plugins are dispensed via Node’s NPM directory. Normally, they may be prefixed with gulp- Example: gulp-jshint. You can get list of all gulp plugins here.

To install gulp plugin, run following command.

1    npm install --keep-dev gulp-jshint    ?

You also can set up more than one plugins together.

1    npm deploy --save-dev gulp-jshint gulp-concat gulp-uglify     ?

By default, it continually installs the today's version available. But if you wish to deploy unique model then identical you could consist of in the command.

1   npm deploy <module>@version --save-dev   ?

Question 7. How Do You Uninstall Gulp?

Answer :

Run following command to uninstall gulp globally.

1  npm uninstall -g gulp    ?

And if you want to eliminate out of your undertaking,

1    npm uninstall --save-dev gulp             ?

CSS3 Tutorial HTML 5 Interview Questions
Question eight. What Is Code Over Configuration?

Answer :

Gulp prefers code over configuration, which continues matters easy and makes complex responsibilities workable. If you have got worked with grunt, or seen gruntfile.Js then you will find which you do configuration the usage of JSON, and in case of gulp there is simple JavaScript code to do the magic. Here is how a grunt file will look like.

Module.Exports = function(grunt) 
  grunt.InitConfig(
    pkg: grunt.Document.ReadJSON('bundle.Json'),
    concat: 
      alternatives: 
        separator: ';'
      ,
      dist: 
        src: ['src/**/*.Js'],
        dest: 'dist/<%= pkg.Name %>.Js'
      
    
     
 );
  grunt.LoadNpmTasks('grunt-contrib-concat');
  grunt.RegisterTask('default', ['concat']);
Here, we are configuring the grunt plugins thru JSON. You can see the whole pattern record here.

And below is a pattern gulp report,

var gulp = require('gulp'); 
var concat = require('gulp-concat');
gulp.Challenge('scripts', function() 
    return gulp.Src('js/*.Js')
        .Pipe(concat('all.Js'))
        .Pipe(gulp.Dest('dist'));
);
gulp.Venture('default', ['scripts']);
As you could see, there is all code no configuration. The document looks a good deal smooth and possible. This is an advantage of gulp over grunt.

Question nine. What Is Node Stream?

Answer :

Stream is an item that permits you to study the information from source and then ship (pipe) it to destination. The strength is circulate is that the entirety is done in memory.

HTML DOM Interview Questions
Question 10. How Does Gulp Use Streams And What Are The Benefits Of Using It?

Answer :

As cited earlier, that Gulp is a streaming construct gadget, uses node’s streams. So it reads the files and maintains them in memory, carry out all the operation in reminiscence, and in the end write the record to disk. Here take a look at pattern gulp report.

Var gulp = require('gulp'); 
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
gulp.Project('scripts', characteristic() 
    go back gulp.Src('js/*.Js')
        .Pipe(jshint())
        .Pipe(jshint.Reporter('default'))
        .Pipe(uglify())
        .Pipe(concat('app.Js'))
        .Pipe(gulp.Dest('build')););
// Default Task
gulp.Challenge('default', ['scripts']);
Here a single challenge named “script” does magic for 3 gulp plugins jshint, uglify and concat. It first reads all the js files and pipe it to jshint (which exams for mistakes) and which passes it directly to uglify and uglify will do the its task and pass the updated source to touch which contacts the documents in “app.Js” record and subsequently writes to the disk.

So right here are benefits of the use of streams in gulp,

There are much less wide variety of document I/O operations, in fact only 2. Just suppose how grunt will do the same job. Grunt will take the report -> runs the challenge -> write the report. And repeat the equal procedure for the challenge. So there are more record I/O operations. Though this feature can be coming soon in grunt as nicely. But for now, gulp is the winner.

It makes gulp quicker, when you consider that grunt doesn’t use streams.

In gulp, you could chain multiple obligations however that’s not possible with grunt.

HTML 5 Tutorial
Question 11. Which Are Different Functions Of A Gulpfile?

Answer :

There are four functions which completes a gulpfile.

Gulp.Venture
Gulp.Src
Gulp.Dest
Gulp.Watch
Node.Js Interview Questions
Question 12. What Is Gulp.Challenge And How To Use It?

Answer :

gulp.Task registers the function with a name.In different words, it defines your tasks. Its arguments are call, deps and fn.

Call: is of string kind and it's far call of the assignment. Tasks that you need to run from the command line need to now not have spaces in them.,

deps: An array of duties to be performed and completed before your task will run. This is optional.

Fn: is the characteristic that plays the challenge’s fundamental operations. This is likewise elective.

As noted, each deps and fn are optional but you have to deliver both deps or fn with the call argument. So, it has three paperwork.

Gulp.Challenge('mytask', feature() 
  //do stuff
);
1   gulp.Project('mytask', ['array', 'of', 'task', 'names']);  ?

The obligations will run in parallel (), so don’t expect that the tasks will start/finish in order.

Gulp.Challenge('mytask', ['array', 'of', 'task', 'names'], function() 
  //do stuff .
);
An array of obligations to be completed and finished earlier than your venture will run.

Shell Scripting Interview Questions
Question 13. What Is Gulp.Src And How To Use It?

Answer :

As the call endorse src, factors on your supply documents (files you want to use). It returns a readable flow after which piped to different streams the use of .Pipe 

1    gulp.Src(globs[, options])        ?

It takes glob as parameter at the side of an elective [option] parameter.

Node.Js Tutorial
Question 14. What Is Gulp.Dest And How To Use It?

Answer :

It points to the folder where report needs to written. This returns a writable stream and file objects piped to this are saved to the file machine. Folders that don’t exist might be created.

1      gulp.Dest(direction[, options])             ?

It has 2 arguments direction and an optionally available Option.The course (output folder) to write files to. Or a function that returns it.

In short src and dest is like replica and paste function.

Question 15. What Is Gulp.Watch And How To Use It?

Answer :

As we write code and alter your files, the gulp.Watch() method will watch for modifications and robotically run our responsibilities once more so we don’t need to run the gulp command on every occasion.

1    gulp.Watch(glob [, opts], tasks) or gulp.Watch(glob [, opts, cb])       ?

Example:

gulp.Undertaking('watch', feature () 
   // Watch .Js files
  gulp.Watch('src/js/*.Js', ['scripts']);
   // Watch .Scss files
  gulp.Watch('src/scss/*.Scss', ['sass']);
);
Here we have defined a challenge named “watch”, in which we are watching for js files adjustments and css files adjustments using gulp.Watch. And on every occasion, there may be any exchange in .Js record, then run [scripts] task (which should be already described on your gulpfile.Js) and in case of .Scss file adjustments, run [sass] project.

CSS Interview Questions
Question 16. What Is Default Task In Gulp?

Answer :

Default task is not anything however a way to execute all defined assignment collectively. Basically it’s a wrapper to different duties.

1   gulp.Project('default', ['lint', 'sass', 'scripts', 'watch']);     ?

When default venture receives carried out, it executes all of the four tasks.

While going for walks gulp project from command line, you don’t have write venture call if you want to execute default assignment.

CSS Tutorial
Question 17. How Do You Execute Gulp Task?

Answer :

You can execute the gulp assignment from command line. To execute jshint mission

1     gulp jshint             ?

And to execute default mission,

gulp
or
gulp default
CSS Advanced Interview Questions
Question 18. What Is Require() In Gulpfile.Js?

Answer :

require() is used to load middle gulp and gulp plugins. You want to load all the gulp plugins in your gulpfile.Js the usage of require(), if you wish to use them.

Var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');
CSS3 Interview Questions
Question 19. Is There Any Way To Load All Gulp Plugins In One Go?

Answer :

Yes, there may be. Rather than specifying require for each plugin, gulp-load-plugins will seek your packages.Json document and mechanically include them as plugins.PluginName().

Var gulp = require('gulp'),
var plugins = require('gulp-load-plugins')();
CSS Advanced Tutorial
Question 20. Which Are The Most Used Gulp Plugins?

Answer :

Though there are many plugins which you can use, but below are the maximum used.

Gulp-jshint: Validate documents with JSHint.
Gulp-uglify: Minify files with UglifyJS.
Gulp-concat: Concatenate files.
Gulp-sass: Compile SASS documents to CSS.
Gulp-rename: To rename documents without problems.
Gulp-cssmin: Minify css.
SASS (Syntactically Awesome Style sheets) Interview Questions
Question 21. How To Compile Sass File To Css File Using Gulp?

Answer :

var gulp   = require('gulp'),
    sass   = require('gulp-sass');
 
// Compile Our Sass
gulp.Mission('sass', function() 
    return gulp.Src('scss/*.Scss')
        .Pipe(sass())
        .Pipe(gulp.Dest('css'));
);
 
// Watch Files For Changes
gulp.Challenge('watch', characteristic() 
  gulp.Watch('scss/*.Scss', ['sass']);
);
 
// Default Task
gulp.Assignment('default', ['sass', 'watch']);
Question 22. How To Concat, Uglify And Rename All Javascript Files Using Gulp?

Answer :

var gulp = require('gulp'); 
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
 
// Concatenate & Minify JS
gulp.Assignment('scripts', feature() 
    go back gulp.Src('js/*.Js')
        .Pipe(concat('all.Js'))
        .Pipe(gulp.Dest('dist'))
        .Pipe(rename('all.Min.Js'))
        .Pipe(uglify())
        .Pipe(gulp.Dest('dist'));
);
 
// Watch Files For Changes
gulp.Challenge('watch', characteristic() 
    gulp.Watch('js/*.Js', ['lint', 'scripts']);
);
 
// Default Task
gulp.Venture('default', ['scripts', 'watch']);
SASS (Syntactically Awesome Style sheets) Tutorial
Question 23. Gulp Vs Grunt?

Answer :

Gulp and Grunt, both are JavaScript project runners and each do the same activity. Let’s first see some similarities.

Both are JavaScript task runner and automate diverse such things as minification, blunders checking, compiling SAAS or LESS to css and plenty of extra…
Both are using npm for set up and depend on Node.Js
Both have plenty of plugins to do the all of the job.
Now, in which they range:

Gulp prefers code over configuration technique, which makes element more efficient and doable.
Gulp uses node movement to lessen report I/O operations even as performing any assignment, where with Grunt performs extra record I/O operations. Which makes gulp speedy.
Grunt is synchronous by layout. Each project will most effective run after the last assignment has finished, in a series. On the other hand, Gulp is asynchronous. So you could’t make sure wherein exact order the obligations may be finished.
Grunt plugins do a couple of process which complicates matters, in which gulp plugins are clean to do handiest one process.
Community aid is brilliant for grunt as it’s very antique, where for gulp, its no longer that high-quality in contrast with Grunt.
Grunt has greater plugins to work with than gulp.
That’s all folks. If you have got something to feature in this list, please mention in remarks section. Meanwhile, proportion this for your community and unfold this to help others.

Below is a pattern gulpfile.Js on your reference.

Var gulp = require('gulp'); 
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
 
// Lint Task
gulp.Undertaking('lint', function() 
    go back gulp.Src('js/*.Js')
        .Pipe(jshint())
        .Pipe(jshint.Reporter('default'));
);
 
// Compile Sass
gulp.Task('construct-css', function() 
    return gulp.Src('scss/*.Scss')
        .Pipe(sass())
        .Pipe(gulp.Dest('css'));
);
 
// Concatenate & Minify JS
gulp.Assignment('scripts', characteristic() 
    go back gulp.Src('js/*.Js')
        .Pipe(concat('all.Js'))
        .Pipe(gulp.Dest('dist'))
        .Pipe(rename('all.Min.Js'))
        .Pipe(uglify())
        .Pipe(gulp.Dest('dist'));
);
 
// Watch Files For Changes
gulp.Assignment('watch', characteristic() 
    gulp.Watch('js/*.Js', ['lint', 'scripts']);
    gulp.Watch('scss/*.Scss', ['build-css']);
);
 
// Default Task
gulp.Challenge('default', ['lint', 'build-css', 'scripts', 'watch']);
Javascript Advanced Interview Questions