When I first came across a gulp file, it was during my first ever team project. Being a beginner, I was paired with a fellow beginner developer and we were tasked with setting up the gulp file for the project. We immediately began looking at examples of gulp files over the net, mostly on Github repos, and my initial thoughts were, how hard could this be? An hour later, we realized we were having a little bit of a hard time wrapping our heads around what was really going on in that file.
I also realized that later on, whenever I came across a gulp task error and approached someone for help, a common response I would get from my teammates was “I don’t really know how a gulp file works”.
So, if you are in that state where you have an idea of what the gulp file does but are not really sure how it does it, or you are simply stuck on where to start with setting up a gulp file, or you don’t even know what a gulp file is, this article is for you.
I have made this article as descriptive as possible and going through all the steps to make it easy for the beginners. You can always scroll if you want to get to the juicy parts.
What is a gulp file and why do you need one?
Enough talking, let’s get started.
Install Gulp globally. Run the following command npm i gulp -g If you are using a Mac run sudo npm i gulp -g
Create a root directory folder and name it src. Using your terminal (I use iTerm) navigate to this directory and run npm init. This will initialize package.json file.
Next, we want to install Gulp locally. Do this by running npm i gulp –save-dev This will also create the node-modules folder. This folder contains all the modules required for your application. In this case, Gulp and the plugins.
We use –save-dev to save this package in devDependencies in our package.json file.
Create your gulpfile.js file in your root directory. For Mac users, just touch that file:) touch gulpfile.js
Install your first task plug-in. This will be jshint, to lint (check for errors) our JS files/code. (If you are using ReactJS, I would recommend using ESLint)
Mission one: Report pathetic code:
Run npm i gulp-jshint –save-dev to install the jshint plug-in.
Create a scripts folder and add a tasks.js file inside it. For Mac users, run mkdir scripts , cd into this directory and touch that file touch tasks.js
Inside the tasks.js file, add the following code:
This is a simple Hello function that outputs ‘Hello World’ when invoked.
Now, the excitement begins! Let’s see how these tasks work. Navigate back to your root directory. You can do this by running cd .. to move a folder up. When you are in your root directory, run gulp lint. This should happen:
If you go back to your tasks.js file and remove the semicolon after the console.log function and run gulp lint. This should happen:
As you can see, the error has been spotted and brought to your attention.
Let’s go back to our file and explain what happens.
The following operations take place:
- The gulp module/dependency is required. (Line 2)
- The jshint plug-in object is assigned the variable jshint. (Line 5)
- A new gulp task named lint is defined. This task pipes all js files in the scripts folder (this /*.js means all js files you have in the folder will be linted) and outputs errors to the console. (Line 8)
We are done! Basically the above is how you initialize a task in a gulpfile. The gulpfile, therefore, is just many tasks rounded up in one file.
Let us add two more tasks, jade, default and watch to watch when changes are made.
Create a file named home.jade in the root directory. touch home.jade
In this file, we will write code that displays Hello World on the browser. On your jade file write the following code:
Write the gulp task that will convert this file from jade to html.
run npm i –save gulp-jade.
Then write the following code in your gulpfile:
When you run gulp jade on your terminal the public folder is created and a html file is generated from the home.jade file.
If you navigate to the public folder and open the home.html file on your browser, it should display Hello World, or any other fancy message like Women in Tech Rock.
Add the watch task to watch for any changes on any of your files. Add the following code to your gulpfile:
So, now when you run gulp watch and make any changes on the respective files, you should be able to see such messages on your terminal (I love my terminal purple:), although it does not look like this anymore :D)
Finally let us add a default task. This will have run just one gulp command. Add the following task to your gulpfile:
When you run the command gulp on the terminal and then make changes on your files, you can be able to see the following on your terminal:
And that is how a gulpfile works:) There are many tasks that you can do, this is just an introduction. But when you get to understand how it works, you can do more with it.