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
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
- 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 –
- 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***.
- 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
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.
- 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.
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
- 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
- Configure a folder and create package.json file if not created already
- Install Gulp Locally, this updates
devDependenciessection of package.json accordingly.
npm install gulp --save-dev
- Streams helps to compose
large systemsout of small components which can perform one thing well.
- Streams separate
concernsbecause they restrict the
implementation surface area into a consistent interfacewhich 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
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.
Here we will get started with Gulp-Changed plug-in and how it helps in notifying the change.
gulp-changed-in-placeplug-in is used to track / monitor the changed files and detects if the files in the stream have changed or not.
gulp-changedchecks against build files like ES5 files generated by Babel.js from the source ES6 files.
gulp-changed-in-placemonitors source files, ES6 files
$ 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
gulp-watch keeps watching / monitoring continuously and alerts whenever there is change in the file.
$ 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
The main difference between
gulp-plumber is that plumber helps to
prevent pipe breaking caused by errors from gulp plugins, while watch just
Installation of plumber:
$ npm install --save-dev gulp-plumber
Benefits: Plumber ensures the system doesn’t stop or block in case of any error.
var plumber = require('gulp-plumber'); gulp.src('./src/*.js') .pipe(plumber()) .pipe(jshint()) .pipe(gulp.dest('./dist'));
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.
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.