Gulp Interview Questions & Answers

5 avg. rating (100% score) - 1 votes

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

Gulp Interview Questions
    1. Question 1. What Is Gulp?

      Answer :

      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.

    2. Question 2. Is Gulp Based On Node.js?

      Answer :

      Yes. Gulp is based on node.js.

    3. Question 3. Why To Use Gulp?

      Answer :

      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.

    4. Question 4. How Do You Install Gulp?

      Answer :

      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.

    5. Question 5. How Do You Setup/configure Gulp?

      Answer :

      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.

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

      Answer :

      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.

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

    7. Question 7. How Do You Uninstall Gulp?

      Answer :

      Run following command to uninstall gulp globally.

      1  npm uninstall -g gulp    ?

      And if you wish to remove from your project,

      1    npm uninstall --save-dev gulp             ?

    8. Question 8. What Is Code Over Configuration?

      Answer :

      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.

      1. module.exports = function(grunt) {
      2.   grunt.initConfig({
      3.     pkg: grunt.file.readJSON('package.json'),
      4.     concat: {
      5.       options: {
      6.         separator: ';'
      7.       },
      8.       dist: {
      9.         src: ['src/**/*.js'],
      10.         dest: 'dist/<%= pkg.name %>.js'
      11.       }
      12.     }
      13.      
      14.  });
      15.   grunt.loadNpmTasks('grunt-contrib-concat');
      16.   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,

      1. var gulp = require('gulp'); 
      2. var concat = require('gulp-concat');
      3. gulp.task('scripts', function() {
      4.     return gulp.src('js/*.js')
      5.         .pipe(concat('all.js'))
      6.         .pipe(gulp.dest('dist'));
      7. });
      8. 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.

    9. Question 9. What Is Node Stream?

      Answer :

      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.

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

      Answer :

      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.

      1. var gulp = require('gulp'); 
      2. var concat = require('gulp-concat');
      3. var uglify = require('gulp-uglify');
      4. var jshint = require('gulp-jshint');
      5. gulp.task('scripts', function() {
      6.     return gulp.src('js/*.js')
      7.         .pipe(jshint())
      8.         .pipe(jshint.reporter('default'))
      9.         .pipe(uglify())
      10.         .pipe(concat('app.js'))
      11.         .pipe(gulp.dest('build'));});
      12. // Default Task
      13. 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.

    11. Question 11. Which Are Different Functions Of A Gulpfile?

      Answer :

      There are 4 functions which completes a gulpfile.

      1. Gulp.task
      2. Gulp.src
      3. Gulp.dest
      4. Gulp.watch

    12. Question 12. What Is Gulp.task And How To Use It?

      Answer :

      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.

      1. gulp.task('mytask', function() {
      2.   //do stuff
      3. });

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

      1. gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
      2.   //do stuff .
      3. });

      An array of tasks to be executed and completed before your task will run.

    13. Question 13. What Is Gulp.src And How To Use It?

      Answer :

      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 

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

      It takes glob as parameter along with an optional [option] parameter.

    14. Question 14. What Is Gulp.dest And How To Use It?

      Answer :

      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.

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

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

      Answer :

      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:

      1. gulp.task('watch', function () {
      2.    // Watch .js files
      3.   gulp.watch('src/js/*.js', ['scripts']);
      4.    // Watch .scss files
      5.   gulp.watch('src/scss/*.scss', ['sass']);
      6. });

      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.

    16. Question 16. What Is Default Task In Gulp?

      Answer :

      Default task is nothing but a way to execute all defined task together. Basically it’s a wrapper to other tasks.

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

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

      Answer :

      You can execute the gulp task from command line. To execute jshint task

      1     gulp jshint             ?

      And to execute default task,

      1. gulp
      2. or
      3. gulp default

    18. Question 18. What Is Require() In Gulpfile.js?

      Answer :

      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.

      1. var gulp = require('gulp'),
      2.     jshint = require('gulp-jshint'),
      3.     uglify = require('gulp-uglify'),
      4.     concat = require('gulp-concat');

    19. Question 19. Is There Any Way To Load All Gulp Plugins In One Go?

      Answer :

      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().

      1. var gulp = require('gulp'),
      2. var plugins = require('gulp-load-plugins')();

    20. Question 20. Which Are The Most Used Gulp Plugins?

      Answer :

      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.

    21. Question 21. How To Compile Sass File To Css File Using Gulp?

      Answer :

      1. var gulp   = require('gulp'),
      2.     sass   = require('gulp-sass');
      3.  
      4. // Compile Our Sass
      5. gulp.task('sass', function() {
      6.     return gulp.src('scss/*.scss')
      7.         .pipe(sass())
      8.         .pipe(gulp.dest('css'));
      9. });
      10.  
      11. // Watch Files For Changes
      12. gulp.task('watch', function() {
      13.   gulp.watch('scss/*.scss', ['sass']);
      14. });
      15.  
      16. // Default Task
      17. gulp.task('default', ['sass', 'watch']);

    22. Question 22. How To Concat, Uglify And Rename All Javascript Files Using Gulp?

      Answer :

      1. var gulp = require('gulp'); 
      2. var concat = require('gulp-concat');
      3. var uglify = require('gulp-uglify');
      4. var rename = require('gulp-rename');
      5.  
      6. // Concatenate & Minify JS
      7. gulp.task('scripts', function() {
      8.     return gulp.src('js/*.js')
      9.         .pipe(concat('all.js'))
      10.         .pipe(gulp.dest('dist'))
      11.         .pipe(rename('all.min.js'))
      12.         .pipe(uglify())
      13.         .pipe(gulp.dest('dist'));
      14. });
      15.  
      16. // Watch Files For Changes
      17. gulp.task('watch', function() {
      18.     gulp.watch('js/*.js', ['lint', 'scripts']);
      19. });
      20.  
      21. // Default Task
      22. gulp.task('default', ['scripts', 'watch']);

    23. Question 23. Gulp Vs Grunt?

      Answer :

      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.

      1. var gulp = require('gulp'); 
      2. var jshint = require('gulp-jshint');
      3. var sass = require('gulp-sass');
      4. var concat = require('gulp-concat');
      5. var uglify = require('gulp-uglify');
      6. var rename = require('gulp-rename');
      7.  
      8. // Lint Task
      9. gulp.task('lint', function() {
      10.     return gulp.src('js/*.js')
      11.         .pipe(jshint())
      12.         .pipe(jshint.reporter('default'));
      13. });
      14.  
      15. // Compile Sass
      16. gulp.task('build-css', function() {
      17.     return gulp.src('scss/*.scss')
      18.         .pipe(sass())
      19.         .pipe(gulp.dest('css'));
      20. });
      21.  
      22. // Concatenate & Minify JS
      23. gulp.task('scripts', function() {
      24.     return gulp.src('js/*.js')
      25.         .pipe(concat('all.js'))
      26.         .pipe(gulp.dest('dist'))
      27.         .pipe(rename('all.min.js'))
      28.         .pipe(uglify())
      29.         .pipe(gulp.dest('dist'));
      30. });
      31.  
      32. // Watch Files For Changes
      33. gulp.task('watch', function() {
      34.     gulp.watch('js/*.js', ['lint', 'scripts']);
      35.     gulp.watch('scss/*.scss', ['build-css']);
      36. });
      37.  
      38. // Default Task
      39. gulp.task('default', ['lint', 'build-css', 'scripts', 'watch']);

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Gulp Tutorial