Advanced WordPress Development: Using Gulp to Streamline Your Workflow
This is the fifth post in our six-part series focusing on WordPress for advanced developers. This series follows on from our popular WordPress Development for Intermediate Users, which introduced you to some meaty coding topics, including theme development in detail, making themes customizer-ready, building plugins, custom post types and taxonomies, queries and loops, custom fields and metadata, and localization.
In this tutorial, we’ll focus on how you can make the most of Gulp; how you can delegate common tasks to Gulp so you can concentrate on more important tasks like actually coding.
Note: It’s important that you have a working knowledge of PHP as this is the foundational language of WordPress for this series, which covers advanced topics aimed at developers. I’ll be referring to code snippets throughout this series.
To get started, first install Node using the handy installer on the main Node site.
Next, use the code below to install Gulp. That’s it!
A Note About Node and npm Packages
npm is a tool that can be used to install packages like Gulp. Most packages are meant to be installed locally – they will only be available in the folder of the project you add them to.
npm uses a special file named
package.json, which contains metadata about your project. It’s name, description, version and – most importantly – the packages that it uses.
As a result, Node projects are very agile. You don’t need to share all the packages used or check them into version control. Just make sure
package.json is available and anyone will be able to use the
npm install command to get all prerequisites in a few seconds.
Some packages – like Gulp – can be installed globally. This is not a requirement, but it is convenient for tools, especially development tools, that we use all the time.
We’ll be installing a few packages related to Gulp for this tutorial. The syntax to accomplish this is the following:
You can install one or more packages by separating their names with spaces.
-D indicates that we’d like to save the packages as development dependencies. They will be placed in the package file for us.
Starting a New Project
For our first example, we’ll create a WordPress theme. You should know how to do that by now: create a new folder in the themes directory, add an
index.php and a
style.css file with the appropriate information, etc. We’ll also add a
package.json file to store our dependencies.
Let’s set all that up within the terminal:
Issue these commands one-by-one. Note the
&& in the first command. This allows me to issue a second command, which means that the first line will create a directory and immediately switch to it as well.
npm init command is a wizard for the
package.json file. It will ask you a series of questions and you can press Enter for each to use the defaults.
We’ll need to install Gulp locally as well to make sure we can use it within our project. The following command will take care of it for us:
When you install your first dependency, you’ll see a new folder named node_modules. This will contain hordes of packages (each one you install will have multiple dependencies of its own). You do not need to add this to your repository; all that is needed is the package file.
Gulp is essentially a task runner. You define a condition when a task should run and then define exactly what the task should do. For example: if you run
gulp optimize in the command line, Gulp should find all images within your project and optimize them.
Since Gulp is a framework and not a magic solution to everything, you need to tell it what the conditions are and what to do when they are met. You use the
gulpfile.js file, which contains all the information Gulp needs to perform its tasks.
Let’s create a gulpfile now with minimal information:
The first line imports Gulp itself. This is followed by our first task named “default.” When you type
gulp into the command line the default task is run. We’ll be adding some code in there later to make some magic happen!
To create a task from start to finish we’ll need to follow a simple checklist:
- Find a package that can perform the task,
- Install the package,
- Add it to the gulpfile, and
- Configure the task by setting the conditions and its options.
Your First Gulp Task
Let’s follow the steps above and make the image optimization happen. But before we do that, let’s add a
screenshot.png image to our theme. I used a photo from Unsplash, which I cropped to 880×660, the recommended size for this file. It ended up being 1MB.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
A quick Google search turned up the gulp-imagemin package, which minifies PNG, GIF and JPG images. Perfect! Installation and usage instructions are usually available on-site. To install this plugin use the following command:
To add it to the gulpfile we’ll include it right under our initial inclusion of Gulp itself:
Finally, we need to define a condition – when a task is run – and tell Gulp what to do. Here’s the code for a new task named “optimize-images”:
src() function, I told Gulp what files to sort through when searching for images. We’re looking for all GIF, JPG, JPEG and PNG files in the root directory and all files in the images directory.
We’re then “piping” the contents of all matched files into a function named
imagemin() which we imported at the top of the file; this is the package we installed earlier. This function will modify the stream and pass it on.
We pipe the received stream to the
dest() function which describes the output location for the files. The given value will overwrite the original files with the optimized version.
If you run the
gulp optimize-images command in the terminal you should see the following output and find that your image has decreased in size:
How Gulp Works
I think the example explains it well, but I want to reiterate and add some additional information. The general process behind a gulp task is the following:
- Target some source files
- Read their content and pass them on to a function
- This passing on, or piping, can happen multiple times within a task. Each function takes the result of the previous, modifies it and passes it along.
- Take the resulting stream and output it to the designated location
Let’s look at processing SASS files as another example. Here’s how the algorithm above could be applied if we wanted to compile all our sass files, automatically add vendor prefixes and minify the result:
- Find all .scss files
- Pass their content on to the Sass compiler
- Pass the resulting content to the auto prefixer
- Pass the result to the minifier
- Save the result to the same source file
Let’s make that happen in Gulp. We’ll need three packages:
We can install them in one go using the following command:
Next, let’s add them to our gulpfile right at the top
We should also add some Sass to our theme. Let’s create a Sass file in the main directory called
style.scss with the following content:
Finally, we need to create the task which will perform all the actions we need. Here’s the full code with the explanation underneath.
I’ve taken all the SCSS files in the root directory, piped them to the
sass() function, followed by the autoprefixer, followed by the cleanCSS function and finally I piped everything to the main directory which will result in
style.scss being output to
style.css. The resulting CSS is the following:
As you can see, everything has been minified – the variable has been replaced with its value and vendor prefixes have been added where necessary.
To come up with this code I went to the documentation of each and copy-pasted the pipe part of the example, it really as that simple. The commands may have some options worth looking into but most work fine out-of-the-box.
By issuing our commands we’ve already come a long way. We can get Gulp to do whatever we want as long as we find the correct package and add it to our Gulpfile. However, we can do more.
When developing, especially CSS, we tend to save and modify a lot. We would need to issue the
gulp css command continuously. Gulp has a great mechanism called watching which allow us to detect changes in files and automatically issue commands. We can build this in on top of everything we’ve done already.
We essentially need to add a new directive: when a file within the specified set changes, run a task.
Get started by installing gulp-watch and adding it to the gulpfile, this should be easy now that you’ve done it a couple of times.
The new task is pretty simple. All we’re doing is setting the files to watch, and if one of them is matched, we perform one of our existing tasks:
When you run this task with
gulp watch-css you should see something like the screenshot below in your terminal. Note that it does not exit back to the prompt it just “hangs” there. It is waiting for an indicated file to change. When it does it will add some more output. If you’d like to return to the prompt, press control + C.
That’s all there is to Gulp, a few simple rules to follow when adding a task and you can automate to your heart’s content. You can concatenate files, error check them, copy/move/delete files, and even write your own packages for anything not covered by third party packages.
Tools like Gulp can shave hours of work off your work days, which means they are possibly the most worthwhile additions to your skillset.