Gulp.js Introduction and Question-Answer

Workflow Automation with Gulp.js Introduction and Question-Answer

Introduction

Gulp is a command-line task runner for Node.js. Gulp let us automate processes and run repetitive tasks with ease.

What makes Gulp different from other task runners is that it uses Node streams; piping output from one task as an input to the next. It only needs to read a file once, then process it through multiple tasks, and finally write the output file. This results in faster builds because there is no need to create and read intermediary files on the hard drive.

The goal of this tutorial is to introduce Gulp and see it in action. We will make a quick project to demonstrate how tasks work, and how to create an integrated workflow.

Setting up the Environment

Before we can create and run our first task, we need to have something to work on. Create a starter application using express-generator:

$ npx express-generator -v ejs --git gulp-project
$ cd gulp-project
$ npm install

Create a GitHub repository for the project:

  • Head over to GitHub and login or sign up.
  • Create a new empty repository, we can call it “gulp-project”:
Screenshot140
  • Copy repository URL as shown:
Screenshot141
  • Make an initial push:
$ git init
$ git remote add origin YOUR_REPO_URL
$ git add -A
$ git commit -m "initial commit"
$ git push origin master

Project Structure

Our project has the following structure:

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

The goal is to create an automated workflow so we want to make tasks that:

  • Compile CSS files from other sources such as Sass.
  • Generate HTML for static pages.
  • Test the application code.
  • Analyze the code with a linter.
  • Start and automatically reload the application on changes.

Note that Express has the capability of plugging into templating engines by itself, but Gulp gives us more flexibility and can do a lot more thanks to the hundreds of plugins available.

Gulp Installation

To use Gulp, you need to install it as a global module first through NPM:

$ sudo npm install -g gulp-cli

Now we need to download Gulp and its plugins to our project:

$ npm install --save-dev gulp

Writing the First Gulp Task

All Gulp configuration goes in a file called gulpfile.js located at the root of the project. The pattern for writing tasks is that you first load a plugin you’re about to use and then define a task that is based on that plugin.

Gulp is very plugin driven; if you want to accomplish something, you need to know which plugin to use. Usually, a single plugin has a single purpose, and all the plugins are just regular JavaScript.

First, we load the Gulp functions we’ll need usingrequire:

const { src, dest } = require("gulp");
  • src: reads files and directories and creates a stream of data for further processing. Src function supports globbing and filters to better select files.
  • dest: takes a directory and writes the contents of the incoming stream as files. Dest by default overwrites existing files.

Now we can write our first task. A basic form of a task looks like this:

function mytask(callback) {
   // task body
   callback();
}

exports.mytask = mytask;

Functions in Gulp are regular JavaScript functions that take a callback function. We’ll write the code that does the work inside the function. To mark its completion (either success or failure), we use the callback.

To mark successful completion call cb without arguments:

cb()

On error, call the callback with an Error instance:

cb(new Error('Something bad has happened'));

Exported functions are directly callable from the command line:

$ gulp mytask

You may have seen other tutorials showing the older syntax:

gulp.task('name', function() {
	//implementation of the task
});

This syntax works but Gulp devs recommend using the newer syntax I showed earlier.

We will create a simple task to get familiar with basic methods. To copy files, we only need to use the src and dest functions:

function copy(cb) {
    src('routes/*.js')
        .pipe(dest('copies'));
    cb();
}

exports.copy = copy;

This is how it works:

  • src reads JavaScript files from routes/ and passes its contents into the pipeline,
  • pipe will take output of the previous command as pipe it as an input for the next,
  • dest writes the output of previous commands to the copies/ directory.

To run the task open the terminal, navigate to the root of the project and run gulp command and task name as a parameter, like this:

$ gulp copy

You should now have a copy of index.js and users.js in your copies folder.

You can also pass arrays, or use globs with src and dest:

  • folder/*.html – will match all the HTML files in folder.
  • root/**/*.html – will match all the HTML files in all the folders from root to its children.
  • ['**/*.js', '!node_modules/'] – will find recursively *.js files except those in the node_modules directory.

Q.1 The default task representation in gulp is _________.

       A. ABgulp.call(‘default’,function(){ ‘d’,void});

       B. gulp.task(‘default’,function(){ });

       C. gulp.call(‘default’,function(){ ‘default’});

       D. gulp.call(‘default’,function(){ ‘d’,null});

Ans : gulp.task(‘default’,function(){ });


Q.2 Between Grunt and gulp, which is relatively fast?

       A. Grunt

       B. gulp

       C. Both are of the same speed

       D. Neither of them are fast

Ans : gulp


Q.3 While installing gulp with $npm install gulp –save-dev, what does –save- dev represent?

       A. Ensures CLI installation

       B. Missed out components of global installation will be taken here

       C. Installs gulp as a development dependency and updates package.json

       D. Triggers dependency between project and CLI

Ans : Installs gulp as a development dependency and updates package.json


Q.4 Code in a gulp file will be ________ the code in a grunt file.

       A. lesser than

       B. larger than

       C. Equal to

       D. 2x times than

Ans : 2x times than


Q.5 What was used by the gulp files?

       A. JSON

       B. JS

       C. None of the options

       D. Both the options

Ans : JS


Q.6 Which command in the CLI triggers the ‘default` task?

       A. run gulp

       B. run gulp default

       C. gulp

       D. run default gulp

Ans : gulp


Q.7 Which among the following helps to compile into .CSS format?

       A. gulp-sass

       B. gulp-less

       C. Both the options

Ans : Both the options


Q.8 Which helps with sequencing the tasks one by one?

       A. Only watch and plumber

       B. .pipe

       C. watch

       D. plumber

Ans : .pipe


Q.9 Which plug-in helps in task dependencies?

       A. No gulp plug-in is required

       B. gulp-depend

       C. gulp-seq

       D. gulp-order

Ans : No gulp plug-in is required


Q.10 gulp-concat helps with the __________.

       A. Concatenation of files in the given location

       B. Concatenation of .js/.css files alone

       C. Concatenation of CSS files

       D. Concatenation of JavaScript files

Ans : Concatenation of files in the given location


Q.11 In-memory caching is enabled with the help of which gulp plug-in?

       A. gulp-tempcache

       B. gulp-cached

       C. gulp-sess

       D. gulp-cookie

Ans : gulp-cached


Q.12 To convert .svg icons into fonts, gulp provides ________ plug-in.

       A. gulp-svgfont

       B. gulp-iconfont

       C. gulp-svgchange

       D. All the options

Ans : gulp-iconfont


Q.13 Organizing the gulp plug-ins can be easily achieved through ____________.

       A. gulp-load-plugins

       B. gulp-reload-plugins

       C. gulp-reload-package

       D. gulp-load-package

Ans : gulp-load-plugins


Q.14 Before installation of gulp, installation of _____________ acts as a prerequisite.

       A. Node.js

       B. Brocolli.js

       C. Grunt.js

       D. Bower.js

Ans : Node.js


Q.15 While installing gulp using the syntax npm install gulp –save-dev, ________section of _________ is updated.

       A. globalDependencies, gulpfile

       B. devDependencies, gulpfile

       C. globalDependencies, package.json

       D. devDependencies, package.json

Ans : devDependencies, package.json


Q.16 Which package helps in minifying the CSS?

       A. gulp-min-css

       B. gulp-minify-css

       C. gulp-css-minify

       D. gulp-compressify-css

Ans : gulp-minify-css


Q.17 Which plug-in has optimizers and compressors?

       A. gulp-watch

       B. gulp-imagemin

       C. gulp-plumber

       D. gulp-changed

Ans : gulp-imagemin


Q.18 How does installing gulp globally help?

       A. Can draw reference within Grunt easily

       B. All files in any directory can be mapped easily

       C. Helps to run gulp command from any project folder

       D. All the options

Ans : Helps to run gulp command from any project folder


Q.19 How to check if gulp has been installed successfully?

       A. gulp -verify

       B. gulp -check

       C. gulp -val

       D. gulp -v

Ans : gulp -v


Q.20 Which Stream(s) provide the ability to both read and write?

       A. Transform

       B. Duplex

       C. Classic

       D. All the options

Ans : Transform


Q.21 Which task would be called in gulp, by default?

       A. Jshint

       B. Plumber

       C. Default

       D. Watch

Ans : Default


Q.22 The different kinds of Streams include ______________.

       A. readable, writable, divide, classic, transcend

       B. readable, writable, duplex, classic, transform

       C. readable, writable, divide, correspond, transform

       D. readable, writable, divide, check, transform

Ans : readable, writable, duplex, classic, transform


Q.23 The default task/plug-ins in gulp are mentioned in the ______ file.

       A. index.html

       B. gulpfile.js

       C. app.js

       D. node.js

Ans : gulpfile.js


Q.24 While installing gulp, the first step would be ________.

       A. $npm install gulp –save-dev

       B. $npm install gulp g –save-dev

       C. $npm install gulp g

       D. $npm install gulp g savedev

Ans : $npm install gulp g


Q.25 Which plug-in notifies whenever there is any change in file?

       A. gulp-notify

       B. gulp-watch

       C. gulp-plumber

       D. gulp-timber

Ans : gulp-timber


Q.26 Streams give higher flow control.

       A. True

       B. False

Ans : True

Click here to read more Blogs

About Author


After years of Technical Work, I feel like an expert when it comes to Develop wordpress website. Check out How to Create a Wordpress Website in 5 Mins, and Earn Money Online Follow me on Facebook for all the latest updates.

Leave a Comment