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:
- Requiring the Gulp plugins we’ll be using in this project.
- 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)
- projectName (Website Root)
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).
Running Gulp Tasks
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”:
- Show any SASS errors
- Clean the CSS
- Move the CSS files into my assess/css folder
If a pipe fails, it will stop.
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:
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).
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.