How to setup Gulp with ES6

ashishmangla0 — Sun, 14 Aug 2022 10:46:00 +0000

Gulp is a tool that runs on Node.js which helps us automate many development tasks, we can use it for automating slow and repetitive work.

How Gulp works

Gulp reads files as streams and pipes those streams to different tasks. These tasks are code-based and use plugins in order to build production files from source files.

Prerequisites

Node.js
npm

How to install Gulp

Install the gulp command line

npm install --global gulp-cli

Create a new project directory and navigate into it

npx mkdirp my-project

cd my-project

Create a package.json file

npm init

Install the gulp in your devDependencies

npm install --save-dev gulp

Transpilation

we have to rename our gulpfile extention gulpfile.js to gulpfile.babel.js for Babel transpilation and have to install the @babel/register module.

How To Create Tasks in Gulp

Gulp gives two composition methods series() and parallel() ,Both Methods takes n numbers of task functions or composed operations. this two methods can be nested within themselves or each other to any depth.

Tasks in series() method

series() method is used when you we have to run tasks in order.

Example

import { series } from "gulp";
const funA = (cd) =>{
cb();
}
const funB = (cd) =>{
cb();
}
export default series(funA ,funB)

Tasks in parallel() method

parallel() method is used when you we have to run tasks in concurrency.

Example

import { parallel } from "gulp";
const javascript = (cd) =>{
cb();
}
const css = (cd) =>{
cb();
}
export default parallel(javascript ,css)

DEV Community: ashishmangla0

How to setup Gulp with ES6

How Gulp works

Prerequisites

How to install Gulp

Install the gulp command line

Create a new project directory and navigate into it

Create a package.json file

Install the gulp in your devDependencies

Transpilation

How To Create Tasks in Gulp

Tasks in series() method

Example

Tasks in parallel() method

Example