How to Set Up a Basic Gulp File

A gulpfile.js file is the one file in your project that tells your system what to do when you run Gulp. While the rest of gulp is installed on your computer, this one file will control what happens in each project. If you’re not sure what Gulp is or why you should read it, check out CSS Trick’s helpful explanation.

Below, you’ll find a Gist (a small piece of code on Git) of a basic gulpfile.js file:

Don’t forget to change the folder structure to match your website’s folder structure.

Structure and Location of a gulpfile.js File

The Gulpfile.js is created around the following two steps:

1. Requiring the Gulp plugins we’ll be using in this project.
2. Running Gulp Tasks

The file must always be named gulpfile.js and can be installed in the root of your project. Here’s an example file structure using the WordPress file structure:

• localhost (How to Set Up a Localhost Site)
  • projectName (Website Root)
    • gulpfile.js
    • wp-content
    • wp-admin
    • wp-includes

You could add the gulp file into your theme folder or your wp-content folder instead. However, since I keep the wp-content file in my git repository as a whole, I keep the gulpfile.js file outside of my git repository by keeping it in the root of the project.

Gulp.js Plugins and Pipes

Requiring Gulp.js Plugins

The first step is to include the plugins within Gulp.js that you want to use. In the code above, I included the basic gulp, gulp-sass (a plugin for processing SASS), Gulp Clean CSS (cleans the CSS), Gulp Minify (minifies the files), and Gulp Concat (to combine multiple js or css files into one).

Most Gulp plugins I’ve found are fairly self-explanatory in what they do. The ones I’m including in the gulp file are the most common basic usages of Gulp: Process my SASS into CSS, clean the CSS, minify the files, and combine my files into one. I’ll be using the last two on my javascript files as well.

Running Gulp Tasks

After requiring the Gulp plugins we’ll be using, there are three separate tasks delineated in the rest of the file. The first deals with the SASS and CSS, the second deals with the Javascript, and the third is the “Watch” setup.

A Gulp tasks is set up simply: gulp.task(‘name’, functionThatHappensWhenYouRunThis());

The “.pipe” combines a series of events.

In the styles task, I take the files under the SASS folder (style.scss) and run three “pipes”:

1. Show any SASS errors
2. Clean the CSS
3. Move the CSS files into my assess/css folder

If a pipe fails, it will stop.

In the scripts task, we do something a little more complicated. In this project, I have all the assets in the same folder: assets/js. Because of this, I have to make sure that while I want to look for changes anywhere in the js folder, I want to ignore the all-js and all-min.js files. You could avoid this issue by instead having a “distribution” folder for the concatenated and minified javascript.

So if any files in this folder (/js) that end in “js” (the asterisk is a wild card that means any name) are edited – any files except our all.js and all-min.js – we run the following “pipes” on them. We exclude the first two files by using the exclamation mark at the beginning of the line.

We run three pipes:

1) Concat all the files into the all.js file. This combines any of our javascript files into one file. We generally want less files loading into our website so it’s faster, so this is a good plan.

2) Minify the javascript into an all-min.js file.

3) Leave the resulting file in the /js folder.

Open the Console, navigate to the folder that gulpfile.js is in, and type “gulp watch”.

In the watch task, we allow the computer to watch for changes and run these tasks anytime they apply. If we didn’t have this task, anytime we made a change, we’d have to type “gulp” into the console again to run these tasks. Instead, when we’re ready to start coding in this project, we simply open up the console, navigate to the root folder (or wherever the gulpfile.js is in our file structure), and type in “gulp watch”. It will continuously watch for changes until we stop it (type Command-C).

Notice in the Gulp Watch task, we’re watching any SASS file in the sass folder, and running the “styles” task. In the same way, we watch for any javascript file changes and run the “scripts” task.

Summary of Setting Up a Basic Gulp.js File

Of course this is a very simple makeup of a gulpfile.js file; they can be far more complicated! However, this basic setup will get you some of the simple benefits of Gulp without being too overwhelming.

Have something else you do with Gulp.js that’s awesome? Let us know in the comments below.