DevOps plays a vital role in “providing automation in the area of Build, Testing and Release to project teams which are normally termed today as Continuous Integration, Continuous Testing, and Continuous Delivery”. The different stages of Devops lifecycle is given in the following section.
- Stages of DevOps lifecycle
The DevOps tools can be categorized in five groups depending on its purpose in the particular stage of DevOps lifecycle:
- Continuous Integration
- Configuration Management
- Continuous Inspection
- Stages of DevOps lifecycle
- GULP PLUGINS
- Gulp is a task runner
In short, a task runner is an application that lets you automate repeatable activities. The tasks are defined in a JS file and executed with a command containing the name of the task.
- run tests and merge files
- compile Sass
- minify CSS/HTML
- bundle/uglify JS
First, you define the tasks. The process is very easy:
Then you can run all tasks with a single command:
Note: Gulp also has an extensive database of plug-ins that you can use to write the tasks even faster.
- Gulp plugins
The following Gulp plugins will be useful for cleaning distribution files and regenerating them after concatenating and minifying.
Gulp plugins are as follows:
These can be installed using the following “npm” commands:
- npm install gulp-clean --save-dev
- npm install gulp-concat --save-dev
- npm install gulp-uglify --save-dev
Add a file to the project and rename it to Gulpfile.js. Load the Gulp tasks in this file:
Before generating the files to be deployed, let’s clean the folder. Following task does this:
Now, let’s create a bundle task that concatenates all JS files, uglifies them and copies inside a folder to be distributed. Following is the task:
The folder public/src contains all JS files of the application. They are concatenated into one file and the contents are then uglified and finally we call the dest task to copy the resultant file to destination, which is the dist folder.
These two tasks can be combined into one task as follows:
Now, if you run the following command, you will have the combined.js file created inside dist folder.
To make a task default, name of the task has to be default.
To run this task, you can run gulp command without passing names of any tasks to it.
- Other plugins
- gulp-load-plugins: load all Gulp plugin modules without require declarations
- gulp-less: the Less CSS pre-processor plugin
- gulp-stylus: the Stylus CSS pre-processor plugin
- gulp-size: displays file sizes and savings
- gulp-nodemon: uses nodemon to automatically restart Node.js applications when changes occur
- Gulp is a task runner
- INSTALLATION PROCESS OF GULP
The current version of Gulp.js 4.0 was announced on December 10, 2018, as the default and published to npm. Anyone using npm install gulp on a new project will receive version 4.
Step 1: Install Node.js
Node.js can be downloaded for Windows, macOS and Linux from nodejs.org/download/. There are various options for installing from binaries, package managers and docker images; full instructions are available.
Once installed, open a command prompt and enter the following to reveal the version number:
You’re about to make heavy use of npm — the Node.js package manager that’s used to install modules. Examine its version number:
Step 2: Install Gulp Globally
Install the Gulp command-line interface globally so the gulp command can be run from any project folder:
npm install gulp-cli -g
Verify Gulp has installed with the following:
Step 3: Configure Your Project
Let’s assume you have a new or pre-existing project in the folder project1. Navigate to this folder and initialize it with npm:
A package.json file that stores your npm configuration settings will be created on completion.
Step 4: Install Gulp Locally
You can now install Gulp in your project folder using this command:
npm install gulp --save-dev
This installs Gulp as a development dependency and the "devDependencies" section of package.json is updated accordingly. We will presume Gulp and all plugins are development dependencies for the remainder of this guide.
Step 5: Create a Gulp Configuration File
Create a new gulpfile.js configuration file in the root of your project folder. Add some basic code to get started:
// Gulp.js configuration
gulp = require('gulp'),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
src = 'src/',
build = 'build/' ;
This references the Gulp module, sets a devBuild variable to true when running in development (or non-production mode) and defines the source and build folder locations.
Step 6: Create Gulp Tasks
On its own, Gulp does nothing. You must:
install Gulp plugins, and
Step 7: Automate Tasks
We have been running one task at a time. We can run them all in one command by exporting a build task in gulpfile.js:
// run all tasks
exports.build = gulp.parallel(exports.html, exports.css, exports.js);
The gulp.parallel() method runs tasks at the same time. It can be combined with gulp.series() to create complex dependency chains. In this example, exports.html, exports.css, and exports.js are run in parallel, but each of those may have sequences of dependencies — including the images task.
Save and enter gulp build at the command line to execute all tasks.
If you found this Article interesting, why not review the other Articles in our archive.