Using Gulp to Speed Up WordPress Development
Build tools let developers focus on efficient development rather than the nitty-gritty details that take away half your life but don’t add much to the project on their own. One such build tool is Gulp.
Gulp optimizes your theme’s images, concatenate your JS files, and processes your Sass/LESS code automatically.
In this article, I’ll show you how to get started and how you can use Gulp to speed up your development process.
What is Gulp?
Sounds Good, How Do I Get Started?
You’ll need Node to run Gulp. This should be easy, just visit nodejs.org and download and run the installer. Node will be installed, along with npm (node package manager), which you will use to grab node packages, such as Gulp.
The next step is to install Gulp globally. You can do this by opening the terminal or command prompt in Windows (I will call both of them terminal from now on) and issuing the following command:
This installs the Gulp command line interface so you can issue Gulp commands anywhere. You also need to install Gulp for your specific project. This is because each project will have different requirements. You won’t be minifying the same files, you won’t be using the same structure, you may not even use WordPress or PHP for all of your projects!
But before we do that, let’s talk WordPress for a moment.
Using Build Tools With WordPress
Most of our efforts will do one of two things: modify existing files or create new files based on existing ones. Many of the files we use for development will not be used in the final product. If we build a theme using Sass for the stylesheet, the final CSS file is what will be shipped as part of the theme, because the original Sass files aren’t needed.
There are two approaches you can take:
- Supply development files within your project
- Omit all development-related files
Supplying Development Files
The upside of this is that you’ll make developers happy and they will be able to extend your work with more exactitude and with a higher degree of freedom. The downside is that the presence of these files may confuse some and you may need to offer support for them just the same. For open source projects, I would consider supplying all the development files, in which case they can reside within the main project.
Omitting Development Files
The upside of omitting these files is that they remove confusion and make downloads smaller. Development files for coding don’t usually add a huge overhead, but if you work with plenty of images or large text files this could be an issue. The downside is that only you will be able to work with the original files. In some projects this would be considered an upside so whichever works for you is what you should choose. Here the files reside outside of the final deliverable folder.
Installing Gulp For Our Project
Our test project will be a simple theme and we’ll be providing our development files so we’ll be using the structure in the left of the image above. Install Gulp in the main theme directory of your site by navigating to the directory in the terminal and issuing the following command:
Gulpfile.js in your main theme folder and paste the following contents into it:
The initial line states that we are requiring Gulp itself. The next section defines a Gulp task. This could be anything from minification to image optimization, for now I’ve left this blank.
Once you’ve saved this file go back to the terminal and issue a single command:
gulp. if nothing else is specified the default task defined in the Gulpfile will be run. We have defined this task but it has no content so it just starts and finishes, you should see something like this in your terminal:
Most tasks will start with a source files (or a single file), manipulate them and output the result into a different file. Sass/LESS might be the most obvious example so let’s start by processing a Sass file.To perform an action you’ll need to find the right Gulp module. This is pretty easy, write “gulp sass” into Google and you’ll find what you need, a package named
To perform an action you’ll need to find the right Gulp module. This is pretty easy, write “gulp sass” into Google and you’ll find what you need, a package named gulp-sass.
Each package’s npm page has instructions on installation and usage. Apart from the specific commands for each module the steps are almost always the same:
- Install the package
- Include the package
- Use it in the Gulpfile
You can install gulp-sass by issuing the following command in the terminal:
Next, create a variable at the top of the Gulpfile that we’ll use later on:
Now we’re ready to create a task! Let me show you the full code and add the explanation below:
I started by defining a task named “sass.” This task takes a source file (the style.sass file within development/styles), processes it and writes it to the style.css file in the main folder. Most of this is accomplished using the
pipe() function. Piping is the backbone of Gulp, it transports data between the different functions.
In this flow we start out with the contents of a source file. The contents are piped to the
sass() function. This takes care of all the sass processing and spits out something (the final CSS). This content is further piped to the
dest() function which defines where the file is written to. It will take on the name of the original file so we’ll end up with
style.css as our final product. To run this task run
gulp sass in the terminal.
Anther common task is the minification of files. Once we’ve created our style.css we could make it a lot smaller, making our theme more efficient.
Let’s follow the same process as before, starting with Googling “gulp minify css”. You should find gulp-minify-css. Install it using
npm install --save-dev gulp-minify-css and include it at the top of your Gulpfile using
var minifyCss = require('gulp-minify-css');
Once everything is set up we can add it to our
sass task. We simply need to pipe our content to the minification function after the sass module has done its thing, here’s the full task:
One trick I love to use is adding the
keepSpecialComments options. By default all comments will be stripped out but our theme is not an actual theme unless it has the header comment in the
style.css file. These cases are exactly why the special comments option exists. Append a exclamation mark after your comment opener (
/*) to make a comment special, here’s a full theme header for you:
Instead of concatenating a bunch of files by giving a source destination and a output location I’ll use one central JS file as an intermediary. Within this file I’ll be able to define which files I want to concatenate and also add regular JS code. In the development/scripts folder I would create a
scripts.js file ,which would look something like this:
I’ve targeted the
development/scripts/scripts.js file and piped it to the include function which will take care of the includes. The destination folder is the root folder, a scripts.js file will be created there. You can run this task by typing
gulp scripts into the terminal.
Running Multiple Tasks
So far so good, but right now only have partial automation and we have to run everything separately. Let’s solve the second issue by filling out our default task. Our default task will run our already existing scripts and styles tasks. This is a simple matter. Here’s how our final default task will look:
That’s it, just keep on adding tasks as needed. Run the default task using the
For our final trick we’ll make all of this run automatically as we make changes. The goal is to get Gulp to watch our scripts and styles and run the required tasks when they change. Install and include gulp-watch on your own and then create a new task with the following code:
This task contains a function that defines two sets of watched files. The first set will watch all files with the
.scss extension within the development/styles folder. When any of them change the
styles task will be run. The second set will watch all files with the
.js extension within the development/scripts folder. When any of them change the
scripts task will be run.
If you run
gulp watch from the terminal you should see that the task starts and finishes, but it doesn’t exit out and allow you to type another command. This is because the files are being watched. If you save a file you’ll see the task start and finish again. This will keep on happening until you close the terminal window or press control+c to exit out.
Saving Time with Build Tools
Build tools like Gulp are immensely powerful and we’ve barely just scratched the surface here. Whatever boring menial task you can come up with, you can automate it with Gulp.The
The Gulp Plugins page is full of packages for ideas and you’ll find a bunch on Github as well. I use it for image optimization, sourcemaps, prefixing, creating local servers, refreshing the browser automatically and more!
Do you use Gulp or a different build tool? How has it altered your workflow? What are the biggest benefits that you see? Let us know in the comments below.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.