Modern Web Development -Workflow Automation with Gulp

Workflow Automation with Gulp

Introduction to Gulp.js

Gulp.js is a command-line task runner utilizing ***Node.js platform***. It simplifies custom-defined repetitious tasks and manages process automation and its a Workflow Automation with Gulp.

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 reads a file once, processes it through multiple tasks, and then writes the output file.

This results in faster builds because there is no need to create and read intermediary files on hard drive.

Modern Web Development -Workflow Automation with Gulp

Repetitive tasks

Developers spend a lot of time in doing some of the repetitive tasks like

  • Compressing new and modified images
  • Generating HTML from templates and content files
  • Compiling Sass to CSS code
  • Removing console and debugger statements from scripts
  • Transpiling ES6 to cross-browser-compatible ES5 code
  • Code linting and validation
  • Concatenating and minifying CSS and JavaScript files
  • Deploying files to development, staging and production servers and so on

Performing each task manually is tedious and with automation, over the long-term, you will save hours of effort, reduce human errors.

Task Runners takes the responsibility of automation and thereby simplifying most of the operations.

Following are the examples of Task runners –

  • Gulp.js
  • Grunt.js
  • Broccoli.js
  • Brunch
  • Webpack and so on

Let’s discuss the key differences between Grunt and Gulp over here –

  • Grunt focuses on ***configuration***, whereas Gulp focuses on ***code***.
  • Grunt was built around a ***set of built-in or commonly used tasks***, whereas Gulp was developed so that ***micro-tasks should connect to each other***.
  • Grunt has been designed to use a series of plugins that each perform ***multiple tasks at the same time***. Each plugin for Gulp is written with the ***goal of doing one thing very well***.
  • Grunt uses data configuration files that are similar to JSON, whereas Gulp employs ***JavaScript***, which tends to be easier to write.
  • Gulp code is often much ***shorter than Grunt code***, as you have to declare source and destination files for every task in Grunt.
  • Gulp has a major advantage with speed because Gulp uses streams and handles tasks in memory, which means that only one file is written. But with Grunt, a temp file is saved with every plug-in pass, and the final destination file is written after passing through all plug-ins making it longer.
  • Gulp can ***process several tasks at the same time***, but Grunt will normally handle one task at a time only.
  • As Gulp is more about coding and single task plug-ins, configuring plug-ins in Gulp is a much more standardized process compared to Grunt plug-ins.
  • Around 6000+ Grunt plug-ins and 2700+ Gulp plug-ins listed on their corresponding official sites.

Modern Web Development -Workflow Automation with Gulp

Installing Gulp.js

Let’s see the list of steps involved in the to set up Gulp.js.

Prerequisites Gulp is a command-line tool and to use Gulp, Node.js must be installed in your system.

Installation steps

  • Install Gulp (global).
  • Create package.json and list dependencies (Gulp and plugins).
  • Install NPM modules.
  • Create gulpfile.js.
  • Load plugin and create tasks.
  • Execute tasks in the command line.

Installing Gulp.js

Let’s get started with the installation of Gulp. And for gulp, we need node.js to be installed first.

Below is the part 1 video for Installing Gulp

Part 2 of Installing Gulp

Installing Gulp.js
  • Install Gulp command-line interface globally helps to execute gulp command from any project folder
npm install gulp-cli -g
  • One can verify if gulp has been installed successfully
gulp -v
  • Configure a folder and create package.json file if not created already
cd Gulp_Project1
npm init
  • Install Gulp Locally, this updates devDependencies section of package.json accordingly.
npm install gulp --save-dev

 

Streams
  • Streams helps to compose large systems out of small components which can perform one thing well.
  • Streams separate concerns because they restrict the implementation surface area into a consistent interface which could be reused.
  • I/O in node is asynchronous, so interacting with the disk and network involves passing callbacks to functions.
  • Various types of streams use .pipe() to pair inputs with outputs.
  • .pipe() is a mere function that takes a readable source stream src: and hooks the output to a destination writable stream dst:

Building on Default Task

Default task gets executed when you call gulp in command prompt. Let’s learn how to build this default task here.

Gulp Changed

Here we will get started with Gulp-Changed plug-in and how it helps in notifying the change.

Workflow Automation with Gulp
Workflow Automation with Gulp
  • gulp-changed-in-place plug-in is used to track / monitor the changed files and detects if the files in the stream have changed or not.

  • gulp-changed checks against build files like ES5 files generated by Babel.js from the source ES6 files.

  • gulp-changed-in-place monitors source files, ES6 files

Installation:

$ npm install --save-dev gulp-changed-in-place

Benefits: Allows to apply source formatting or linting only to changed files.

The Watch Task

Here you will learn about another plug-in gulp-watch and benefits

 

Workflow Automation with Gulp
Workflow Automation with Gulp

gulp-watch keeps watching / monitoring continuously and alerts whenever there is change in the file.

Installation:

$ npm install --save-dev gulp-watch
Using Gulp Plumber to Handle Errors

Ever wondered how to overcome errors whenever you come across some? Gulp-plumber assists in handling errors.

Gulp Plumber vs. Watch
Workflow Automation with Gulp
Workflow Automation with Gulp

The main difference between gulp-watch and gulp-plumber is that plumber helps to prevent pipe breaking caused by errors from gulp plugins, while watch just notifies.

Installation of plumber:

$ npm install --save-dev gulp-plumber

Benefits: Plumber ensures the system doesn’t stop or block in case of any error.

Usage: In gulpfile.js

var plumber = require('gulp-plumber');
gulp.src('./src/*.js')
    .pipe(plumber())
    .pipe(jshint())
    .pipe(gulp.dest('./dist'));
Task Dependencies

This video talks about the Task dependencies and how one could ensure completion of all dependent tasks before completing the final one.

Minifying Images Using Gulp

Learn how to compress the images here using gulp.

Minifying CSS Files Using Gulp

Here you will get to learn more about minifying the CSS files using Gulp.

Minifying JavaScript Using UglifyJS

Learn to compress JavaScript files using gulp plug-in.

Compiling Sass Using Gulp

Learn how to compile SASS into CSS using gulp plug-in.

Compiling LESS Using Gulp

Here you will learn about how to compile a LESS into CSS file.

Concatenation of multiple files

Learn how to concatenate multiple files into a single file here.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x