Gulp can be defined as a task runner or a toolkit for automating time-consuming tasks such as magnification, concatenation, cache busting, unit testing and linting in web development. It uses Node.js as a platform and utilizes JavaScript code to help in running front-end tasks and large-scale web applications. These tasks can be run on PowerShell, Bash Scripts or other terminal applications using command lines.
Gulp differs from other task runners because it passes data stream from one plugin to another without creating a temporary file on the disk. The tasks return a modified stream of data. Gulp is a function-oriented framework with a direct Application Programming Interface that can modify data more efficiently and chain commands together. Furthermore, Gulp prefers code over configuration that makes tasks more manageable.
Advantages :
- Gulp Plugins are user friendly and perform one task at a time. The plugins can also be created by the programmer.
- Gulp is more efficient because it uses Node.js platform to enhance speed.
- It is easy to code and test web applications on it.
Disadvantages :
- Gulp plugins may not support features from underlying library if they get out of date.
- Documentation of Gulp plugin is not very robust and debugging a plugin can be a strenuous task.
Plugins : Gulp has over 3500 plugins. Plugins are installed via npm locally. They are used to transform the behaviour of the files that passes through the data stream. Plugins can be Conditional or Inline too. Each plugin has a specified task and play role in dealing with HTML and CSS , Graphics , JavaScript , Unit Testing , Compilation or other miscellaneous activities. Few examples of plugins like gulp-responsive , gulp-inject , gulp-sass , gulp-grunt , gulp-autoprefixer , gulp-jscs etc.
Prerequisite for Installation :
1. Node.js should be installed in your system. The npm package manager must be installed while setting up Node.js.
2. Presence of any terminal application such as PowerShell, iTerm2, Bash Script etc, according to system requirements.
Installation Of Gulp :
- Step 1: Open the terminal application of your system. For sake of convenience, the screenshots attached in the article and run the below command. The -g indicates that Gulp will be installed globally in the system and can be accessed for any file.
$ sudo npm install gulp-cli -g
Note: Run as Administrator if it is being used in Windows. Mac does not offer the same option.
- Step 2: Create a project directory and navigate into that directory by using the following command.
$ npx mkdir install-project $ cd install-project
- Step 3: Enter the following command line in the opened directory. This line ensures that we have opened a npm based project directory. The attached image shows screen output after entering the command line. Now, a package name must be provided by the user in small letters. Here , the example package name entered is install-project.
$ npm init
{
“name”: “install-project”,
“version”: “1.0.0”,
“description”: “installation checking”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “XYZ”,
“license”: “ISC”
}
- Step 4: The following command will Install the gulp package in your devDependencies.
$ npm install --save-dev gulp
- Step 5: To check that Gulp is installed globally and locally you can run the following command.
$ gulp --version