Gulp Interview Questions & Answers

Finding another job can be so cumbersome that it can turn into a job itself. Prepare well for the job interviews to get your dream job. 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. Gulp is a JavaScript used to develop web applications. It is an open source and developed by Fractal Innovations. It automates the build process and reduce the burden on developers. It is not very popular so not many know about it. Candidates should have basic knowledge on technology in order to get a job. Follow our Wisdomjobs page for Gulp job interview questions and answers page to get through your job interview successfully in first attempt.

Gulp Interview Questions And Answers

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.

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.

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.

1 npm install --global gulp ?

And also install gulp in your project devDependencies:

1 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.

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.

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

You can also install multiple plugins together.

1 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.

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.

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.

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.

1 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.

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.