DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to setup Gulp with ES6
ashishmangla0
ashishmangla0

Posted on • Updated on

How to setup Gulp with ES6

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
Enter fullscreen mode Exit fullscreen mode

Create a new project directory and navigate into it

npx mkdirp my-project
Enter fullscreen mode Exit fullscreen mode
cd my-project
Enter fullscreen mode Exit fullscreen mode

Create a package.json file

npm init
Enter fullscreen mode Exit fullscreen mode

Install the gulp in your devDependencies

npm install --save-dev gulp
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Life is too short to browse without dark mode