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
Recommended Reading
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.
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:
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.
Read following article for better understanding about grunt.
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.
npm install --save-dev gulp-jshint
You can also install multiple plugins together.
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.
npm install <module>@version --save-dev
Q10. How do you uninstall gulp?
Ans. Run following command to uninstall gulp globally.
npm uninstall -g gulp
And if you wish to remove from your project,
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.
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,
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.
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'));});
// Default Task
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.
gulp.task('mytask', function() {
//do stuff
});
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.
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
//do stuff .
});
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).
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.
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.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
Example,
gulp.task('watch', function () {
// Watch .js files
gulp.watch('src/js/*.js', ['scripts']);
// Watch .scss files
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.
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
gulp jshint
And to execute default task,
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.
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().
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.
- gulp-jshint: Validate files with JSHint.
- gulp-uglify: Minify files with UglifyJS.
- gulp-concat: Concatenate files.
- gulp-sass: Compile SASS files to CSS.
- gulp-rename: To rename files easily.
- gulp-cssmin: Minify css.
Q24. How to compile SASS file to css file using gulp?
Ans.
var gulp = require('gulp'),
sass = require('gulp-sass');
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['sass', 'watch']);
Q.25 How to concat, uglify and rename all JavaScript files using gulp?
Ans.
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// Concatenate & Minify JS
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'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
});
// Default Task
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 is synchronous by design. Each task will only run after the last task has finished, in a series. On the other hand, Gulp is asynchronous. So you can’t be sure in which exact order the tasks will be finished.
- 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.
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.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Sass
gulp.task('build-css', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
// Concatenate & Minify JS
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'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['build-css']);
});
// Default Task
gulp.task('default', ['lint', 'build-css', 'scripts', 'watch']);
