The Beginner’s Guide to Gulp

What is gulp and how can you use it in your projects

Emmanuel Akhigbe

Published in

The Startup

6 min readJul 9, 2020

What is Gulp? 🔧

Gulp is a free Javascript toolkit that helps you automate the running of tasks that are part of your workflow; this in turn helps you focus on the actual development of your project.

Imagine if James; a web developer, is using SASS for his project, it’ll have to be transpiled to CSS for the browser to understand no problem with that right? just a few commands and he has his CSS ready. However when he makes a change to the SASS file, he’ll have to rerun that command for the change to be effected in the browser, and there may be numerous tasks like this that need to be performed for the project to work smoothly, the process of rerunning a command to transpile or compile or transform or … can get really tiring pretty fast!

James can tell gulp to watch the SASS file for changes and once he saves the change, it is automatically transpiled to CSS for the browser. No need for manual effort. This is just a tip of the iceberg!

In this guide, we are going to go through some aspects of Gulp to get you started;

Hello World from gulp 🥇
Source
Pipe part 1
Destination
Pipe part 2
Watch
Series
Parallel

First thing first

Install NodeJs though this link, make sure it’s working (Click me to know more about NodeJs),

Run the following commands:

// Install the gulp cli
npm i -g gulp-cli// Create a folder
npx mkdir beginner-gulp// Change directory into the created folder
cd beginner-gulp// Create a package.json file (shortcut)
npm init -y// Install Gulp as a dev dependency
npm install --save-dev gulp// Check if the installation was successful
gulp --version

If the installation went well, you should see something like this

Create a dist and an scr so that your directory structure looks like this:

Note that the gulpfile.js file is at the root of the project

And so the journey begins 🚢

Hello World from Gulp

Let’s go into our gulpfile.js file and create a task. We import the gulp module:

const gulp = require('gulp');

Create a task with the following code

Run the command gulp in the root directory of the project and you should see something like this 👇🏾

🎉 You have just created your first task!

Gulp automatically passes a callback function to your task as its first argument, this callback is to be called when your tasks finishes; that way, you can have asynchronous code in your tasks. Try logging out a string in a setTimeout method, call the callback function outside the method and inside the method and note what happens when you run them

There are 2 types of tasks; public tasks; which are exported from your gulp file, and private tasks which are used internally as part of the series or parallel composition (para what now? 🤔 fear not, we’ll look at these later).

Fear not

Source

I hate to be the one to bring you this news but that task is like the simplest task that can be created, gulp tasks are usually more complex than that. It’s still an awesome tool though. Most real world tasks require that you specify source file which will be worked on. You can use this specify the source file with the src() API.

We’ll be transpiling a sass file to css with gulp; for a practical understanding.

Create a sass file in your sass folder and replace the hello world in your gulpfile with this

Don’t forget to export transpileSassToCss

The src() API returns a stream that reads the metadata object of the source file called vinyl.

Pipe part 1

Imagine you have a stream of water and you can fix a pipe in the stream so that the water passes through it, now, from this pipe, you can filter the water, if you want to color the water after filtering, you add another pipe to do that and so on. So also, gulp allows you to chain pipes to the stream and perform operations on the stream though the pipes with the pipe() API.

Destination

After completing a task on the source file, gulp will output a file, we’ll need to specify where we want this output file to be. In our case, we want the output file to be in the css folder. Edit your transpileSassToCss task like so

If you enter the gulp command in the terminal, you should see that a file has been created in the css folder. Make a change to the sass file in your sass folder, and rerun the gulp command and note what happens, amazing right?

Lets convert our source file to a css file before outputting, we can do this by adding another pipe and using a sass to css plugin like gulp-sass inside the pipe. Delete the scss file in you css folder.

// Install gulp-sass
npm install gulp-sass --save-dev

Import the gulp-sass module into your gulpfile and edit your transpileSassToCss. Your gulpfile should look like this

Any sass you write in the sass folder will now be transpiled to css in the css folder after running the code. You’re getting good at this!

Watch

Let’s tell gulp to watch the sass file for changes and update the css file when due using the watch() API. This API accepts a string of literal and/or wildcard characters, like *, **, or !, called a Glob to match filepaths, it also accepts a function which will be run anytime there is a change in the file path(s) specified. Edit you gulpfile to this, and run the gulp command. Edit the sass file, save and check the css file for the magic 🎩.

Series

Gulp understands that you may want to run multiple tasks, it allows you to do this in one command using the series() API. It accepts tasks as its parameter and it executes the tasks sequentially. Lets create another task called beingWatched that logs out ‘I am being watched’ then add it to the series API alongside watchSassFile. Your gulpfile should look like this

If you run the gulp command, you should see something like this

Gulp started watching after running the **beingWatched** task

series() sequentially ran the tasks that were passed as parameters 🎉

However it doesn’t do so well with asynchronous tasks, it will wait till a task is complete before running subsequent tasks. Make beingWatched log out a string after 3 seconds, run the gulp command, and watch what happens in the console.

Parallel

With the parallel() API provided by gulp, you can run multiple tasks simultaneously by passing tasks in as parameters like we did with series()

Activity: add 2 other tasks that logs out your favorite color and your favorite food after 4 seconds and after 6 seconds respectively, combine these tasks, and run them with the parallel() API.

I hope you learnt something 😀

Goodluck!