How to Gulp it Down

The intent of this article is to describe how to set up Gulp and explain the relationship between it, Node, and NPM at a non-detailed high level. I believe anything more than that may put you at risk, my dear reader, of confusion. That was certainly the case for me when I started learning this.

Let me begin with this analogy that I hope will explain why developers use it when working on a project. Using Gulp to streamline your workflow is like changing the vehicle you use to drive to your destination from a Ford Pinto to a Maserati Quattroporte.

Think of Gulp as Batman’s utility belt. Within it, there is a wide array of open source packages, or modules, or plugins that can do things like validate and compress your Javascript, remove unused CSS, enable an autoprefixer, transpile Javascript for older browsers, and compress images to name just a few. So how does one find this developers godsend?

It begins with an open source, cross-platform runtime environment called Node.js. Within this massive Javascript framework, there is a tooling library and one of its features is something called the Node Package Manager (NPM). It manages a vast repository of modules or packages that help you automate your workflow. One of them is called Gulp and associated with it are many plugins that perform time-saving tasks.

Please refer to the diagram and follow along with me to set this up on your system. For this, you will make use of your terminal and favourite text editor.

how to set up gulp

1. You will need to install both Node and Gulp on your system. Go to Node.js to get the latest version. After that, open your terminal to do the next few steps. Now install Gulp using this command, sudo npm install gulp -g. Your password will be required because this will install it globally.

2. It’s time to create the files and folders in your project directory that will work together to make Gulp work. Create a file called package.json with this command, npm init. This will take you through the steps of creating that file. You can type npm help json for the reference guide. As you may have guessed, this file will be in JSON format. Its purpose is to hold the plugins you will add to your project. More on that later.

3. Time to create another file. Type touch gulpfile.js. This is where the magic will happen. It will contain specific tasks that automate your workflow. The plugins will be imported to it from the package.json file.

4. Although Gulp is installed globally, you now need to install it into your project folder. Type npm install gulp --save-dev. You will now notice that there is a massive folder inside your project directory called node_modules. This contains all the files and dependencies that are required by any plugins you add. They will be linked to the tasks you write in gulpfile.js.

5. The bulk of the setup is complete and now we get to the heart of the matter. Since there are so many plugins, I will only use one as an example for the sake of keeping this post short. A popular one performs the task of merging multiple CSS files into one, aka SASS. All associated plugin dependencies will be downloaded into the node_modules folder and the plugins will be stored in package.json. Type npm install gulp-sass gulp-concat --save-dev. Verify this worked by looking at the new gulp plugins in your directory.

6. Finally, a task can now be written in gulpfile.js. Open this file in your text editor and create paths to the plugin’s dependencies in the node_modules folder by creating some variables.

"use strict";
const gulp = require("gulp");
const sass = require("gulp-sass");
const concat = require("gulp-concat");

Now to write the task,

gulp.task("styles", () => {
return gulp.src("./yourfolder/styles/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(concat("style.css"))
.pipe(gulp.dest("./anotherfolder/styles/")) });

To run this task, simply type gulp styles. However, to make this more convenient, a watch method can be created to make the styles task run every time a change is made to a .scss file, like so,

gulp.task("watch", () => {
gulp.watch("./yourfolder/styles/**/*.scss", ["styles"]); });
.

Phew! It may seem like a lot of setup for only one Gulp task, but the Gulp ecosystem is vast and depending on the nature of the project, each one can be tailored with its own specific set of plugins. For reference, here is a registry of close to 3000 of them. That’s a bit to swallow for an introduction to Gulp but its advantages are huge.

Give praise to all the coders who have written these helpful tools for our use.

This entry was posted in gulp, javascript. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *