Gulp is gaining popularity and it has become part of every web application these days. In this post, find list of latest and updated gulp js interview questions and their answers for freshers as well as experienced users. These interview questions will help you to prepare for the interviews, for quick revision and provide strength to your technical skills.
Gulp.js interview questions
Q1. What is Gulp?
Ans. Gulp is a build system and JavaScript task runner which can automate common tasks of any website like minification, checking js errors, bundling of various js and css files, compile SASS, optimize images, create sprites, concatenate files and many more..
Q2. Is gulp based on node.js?
Ans. Yes. Gulp is based on node.js.
Q3. Why to use gulp?
Ans. Though gulp is not much old but it is becoming very popular. It’s faster than grunt and efficient as well. It prefers code over configuration approach, and uses power of node streams to gives you fast build. Many tech giants are already favoring Gulp like microsoft. Though they do support Grunt, but Gulp is their first choice.
Q4. How do you install gulp?
Ans.Gulp and gulp plugins are installed and managed via npm, the Node.js package manager. To install gulp, first ensure the npm is installed properly. And then run following command to install gulp globally on your system.
Hide Copy Code
npm install --global gulp
Read this excellent
post on “Why do we need to install gulp globally and locally”?
And also install gulp in your project
devDependencies:
Hide Copy Code
npm install --save-dev gulp
--save-dev option writes
devDependencies to “package.json”. Please make sure when you run this command, your package.json is created. If not create, then use
npm init command to create this file.
Q5. How do you setup/configure gulp?
Ans. Once installed, you need to add 2 files to setup gulp.
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 gulp plugins, along with gulp which your project is using.
2. Gulpfile.js: This is where magic happens. This is the place where we define what automation needs to be done and when you want that to happen.
Q6. What is –save-dev option while installing the gulp?
Q7. What is the difference between –save and –save-dev?
Q8. What does ~ (tilde) sign means in package.json?
Ans. To answer all these 3 questions, please read the same on “
Grunt js interview question”. As the answer remains same just replace “grunt” with “gulp”.
Q9. What are gulp plugins and how do you install a gulp plugin?
Ans. A plugin is nothing but a reusable piece of code. Somebody has already made it and distributed to the world to use it, so that you don’t have to code again. It saves your time. Gulp plugins are distributed through Node’s NPM directory. Normally, they are prefixed with
gulp- Example:
gulp-jshint. You can get list of all gulp plugins
here.
To install gulp plugin, run following command.
Hide Copy Code
npm install --save-dev gulp-jshint
You can also install multiple plugins together.
Hide Copy Code
npm install --save-dev gulp-jshint gulp-concat gulp-uglify
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.
Hide Copy Code
npm install <module>@version --save-dev
Q10. How do you uninstall gulp?
Ans. Run following command to uninstall gulp globally.
Hide Copy Code
npm uninstall -g gulp
And if you wish to remove from your project,
Hide Copy Code
npm uninstall --save-dev gulp
Q11.What is code over configuration?
Ans. Gulp prefers code over configuration, which keeps things simple and makes complex tasks manageable. If you have worked with grunt, or seen gruntfile.js then you will find that you do configuration using JSON, and in case of gulp there is plain JavaScript code to do the magic. Here is how a grunt file will look like.
Hide Copy Code
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
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 via JSON. You can see the complete sample file
here.
And below is a sample gulp file,
Hide Copy Code
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['scripts']);
As you can see, there is all code no configuration. The file looks much clean and manageable. This is an advantage of gulp over grunt.
Q12. What is node stream?
Ans. Stream is an object that allows you to read the data from source and then send (pipe) it to destination. The power is stream is that everything is done in memory.
Q13. How does gulp use streams and what are the benefits of using it?
Ans. As mentioned earlier, that Gulp is a streaming build system, uses node’s streams. So it reads the files and keeps them in memory, perform all the operation in memory, and finally write the file to disk. Here take a look at sample gulp file.
Hide Copy Code
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));});
gulp.task('default', ['scripts']);
Here a single task 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 checks for errors) and which passes it on to
uglify and uglify will do the its job and pass the updated source to
contact which contacts the files in “app.js” file and finally writes to the disk.
So here are advantages of using streams in gulp,
- There are less number of file I/O operations, in fact only 2. Just think how grunt will do the same job. Grunt will take the file -> runs the task -> write the file. And repeat the same process for the task. So there are more file I/O operations. Though this feature will be coming soon in grunt as well. But for now, gulp is the winner.
- It makes gulp faster, since grunt doesn’t use streams.
- In gulp, you can chain multiple tasks but that’s not possible with grunt.
Q14. Which are different functions of a gulpfile?
Ans. There are 4 functions which completes a gulpfile.
Gulp.taskGulp.srcGulp.destGulp.watch
Q15. What is gulp.task and how to use it?
Ans. gulp.task registers the function with a name.In other words, it defines your tasks. Its arguments are name, deps and fn.
name: is of string type and it is name of the task. Tasks that you want to run from the command line should not have spaces in them.,
deps: An array of tasks to be executed and completed before your task will run. This is optional.
fn: is the function that performs the task’s main operations. This is also optional.
As mentioned, both deps and fn are optional but you must supply either deps or fn with the
name argument. So, it has 3 forms.
Hide Copy Code
gulp.task('mytask', function() {
});
Hide Copy Code
gulp.task('mytask', ['array', 'of', 'task', 'names']);
The tasks will run in parallel (all at once), so don’t assume that the tasks will start/finish in order.
Hide Copy Code
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
});
An array of tasks to be executed and completed before your task will run.
Q16. What is gulp.src and how to use it?
Ans. As the name suggest
src, points to your source files (files you wish to use). It returns a readable stream and then piped to other streams using
.pipe (as seen in earlier answers).
Hide Copy Code
gulp.src(globs[, options])
It takes glob as parameter along with an optional [option] parameter. Read more about glob
here.
Q17. What is gulp.dest and how to use it?
Ans. It points to the folder where file needs to written. This returns a writable stream and file objects piped to this are saved to the file system. Folders that don’t exist will be created.
Hide Copy Code
gulp.dest(path[, options])
It has 2 arguments
path and an optional
Option.The
path (output folder) to write files to. Or a function that returns it.
In short
src and
dest is like copy and paste function.
Q18. What is gulp.watch and how to use it?
Ans. As we write code and modify your files, the
gulp.watch() method will watch for changes and automatically run our tasks again so we don’t have to run the gulp command each time.
Hide Copy Code
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
Example,
Hide Copy Code
gulp.task('watch', function () {
gulp.watch('src/js/*.js', ['scripts']);
gulp.watch('src/scss/*.scss', ['sass']);
});
Here we have defined a task named “watch”, in which we are watching for js files changes and css files changes using
gulp.watch. And whenever, there is any change in .js file, then run [scripts] task (which should be already defined in your gulpfile.js) and in case of .scss file changes, run [sass] task.
Q19. What is default task in gulp?
Ans. Default task is nothing but a way to execute all defined task together. Basically it’s a wrapper to other tasks.
Hide Copy Code
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
When
default task gets executed, it executes all the 4 tasks.
While running gulp task from command line, you don’t have write task name if you wish to execute default task.
Q20. How do you execute gulp task?
Ans. You can execute the gulp task from command line. To execute jshint task
Hide Copy Code
gulp jshint
And to execute default task,
Hide Copy Code
gulp
or
gulp default
Q21. What is require() in gulpfile.js?
Ans. require() is used to load core gulp and gulp plugins. You need to load all the gulp plugins in your gulpfile.js using require(), if you wish to use them.
Hide Copy Code
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
Q22. Is there any way to load all gulp plugins in one go?
Ans. Yes, there is. Rather than specifying require for each plugin,
gulp-load-plugins will search your packages.json file and automatically include them as plugins.pluginName().
Hide Copy Code
var gulp = require('gulp'),
var plugins = require('gulp-load-plugins')();
Read this
post for more details.
Q23. Which are the most used gulp plugins?
Ans. Though there are many plugins which you can use, but below are the most used.
Q24. How to compile SASS file to css file using gulp?
Ans.
Hide Copy Code
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);
Q.25 How to concat, uglify and rename all JavaScript files using gulp?
Ans.
Hide Copy Code
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
});
gulp.task('default', ['scripts', 'watch']);
Q.26 Gulp vs Grunt?
Ans. Gulp and Grunt, both are JavaScript task runners and both do the same job. Let’s first see
some similarities.
- Both are JavaScript task runner and automate various things like minification, error checking, compiling SAAS or LESS to css and many more…
- Both are using npm for installation and rely on Node.js
- Both have plenty of plugins to do the all the job.
Now, where they differ
- Gulp prefers code over configuration approach, which makes thing more efficient and manageable.
- Gulp uses node stream to reduce file I/O operations while performing any task, where with Grunt performs more file I/O operations. Which makes gulp fast.
- Grunt plugins do more than one job which complicates things, where gulp plugins are clean to do only one job.
- Community support is great for grunt as it’s very old, where for gulp, its not that great in comparison with Grunt.
- Grunt has more plugins to work with than gulp.
That’s all folk. If you have something to add in this list, please mention in comments section. Meanwhile, share this in your network and spread this to help others.
Below is a sample gulpfile.js for your reference.
Hide Shrink 
Copy Code
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');
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('build-css', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['build-css']);
});
gulp.task('default', ['lint', 'build-css', 'scripts', 'watch']);
The post
Latest Gulp js interview questions appeared first on
Talking Dotnet.
B2B Info Solutions Pvt Ltd
