My Advanced Gulp Workflow for WordPress Themes

I remember the time when I had to minify CSS and JS files, compress the images and the fuss of testing my designs across different browsers let alone devices — oh my. If my recollection of lost isn’t misleading me then I used to spend like 30% of my productive hours on this stuff.

JUST A NOTE!
👨‍💻 I’m teaching thousands of devs how to become VSCode Power Users →
✅ This site is super fast?! It’s hosted with Kinsta on Google servers →

Thankfully, someone wrote a piece about DRY (Don’t Repeat Yourself) and it got me thinking about the flaws in my workflow. I believe a tweet from Chris Coyer led me to start using Grunt in 2012 or a little later. I used it for over a year and boy it was a fun ride.

Why Gulp?#

While Grunt took care of optimizing images, compressing scripts, and compiling Sass, I never really enjoyed writing Grunt files. Then in Dec 2013, I heard about this new task runner called Gulp. On a Sunday morning, I thought to create a dummy project and try Gulp, to say that I was hooked would be an understatement.

Why Do I Like Gulp?#

At that time, there was hardly any documentation available for using Gulp with WordPress, but thanks to the awesome helping community at Stack Exchange, I was able to make it work. I found Gulp to be a lot better than Grunt. Here is why:

• Gulp is easier to understand and more efficient
• Gulp has a JavaScript syntax unlike JSON syntax of Grunt
• Gulp is faster than Grunt (One of my theme’s compile time went from 12secs to 300ms)
• Gulp is intuitive and gets 20K-25k downloads a day, which is equal to or great than Grunt downloads
• Gulp’s code-over-configuration makes it not only easy to write tasks for, but also much easier to read and maintain

That said, let’s leave the story for now and see what it is like to be using Gulp with WordPress.

Do I Need to Use Gulp?#

Are you a web developer? Do you program in HTML/CSS sometimes?

— Yes!

Did you ever use a task-runner? Feel like you belong to the stone age while all the crazy kids in town are using awesome advanced workflows?

— Yes! :(.

OK! let’s get you started then.

Since this article is about an advanced Gulp based workflow, explaining how to do basic Gulp related stuff is out of the scope. But instead of leaving you (beginners) in the middle of nowhere, I’d like to suggest a few articles to help you get started.

• Basic: Learn what is Gulp and How to use it (https://www.digitalocean.com/community/tutorials/automate-your-tasks-easily-with-gulp-js)
• Detailed: Building with Gulp (https://www.smashingmagazine.com/2014/06/building-with-gulp/)

If having a basic Gulp workflow is nothing new for you, then maybe you’ll enjoy reading my advanced gulp workflow.

Advanced Gulp WordPress Workflow#

While building premium themes for WordPress, I end up with a lot of grunt work which includes

• Minifying & optimizing CSS with stylesheets and Sass
• Custom JavaScripts and 3rd Party Scripts via Bower
• Synced cross-browser design testing on different devices
• Tunneling my localhost dev branch to a random public URL for public access
• Building an installable zip theme file without any node modules, cache files or .Dot files data in it

Let’s explore how I get all this stuff done with Gulp.

I have set up a Github repository called Advanced Gulp WordPress. You can check out the structure of files inside it for better understanding.

A Look at gulpfile.js#

Now let’s take a look at gulpfile.js which is present in the root folder of our theme. I will explain each task one by one to make it easier for you to understand. You’ll find completed gulpfile.js at the end of this post.

Since I assume you already know how Gulp works, I will not be explaining how to put all the plugins/packages in package.json file and other basic setup related steps.

Step #1: Setting Up the Variables#

Firs of all I am going to set up certain variables so that I don’t have to change everything for every other theme I create. Let’s review the code

I’ve set up variables for

• L#12 Project name
• L#13 Project URL at localhost
• L#14 Path to folder of Bower Components
• L#15 Name of the folder which will be created for building an installable theme zip file
• L#16 Variable buildInclude contains the paths to files or folders which are to be included and excluded in while building a clean theme inside buildTheme folder for creating a zip file

Step #2: Loading Gulp Plugins#

I am using quite a few gulp plugins to help manage everything we discussed above.

The plugins I am using to are as follows

• Gulp — Pretty much self-explanatory
• BrowserSyn — Amazing Time-saving synchronized browser testing
• AutoPrefixer — Auto prefix CSS for legacy browsers
• UglifyCSS — For CSS Minification
• Filter — Enables you to work on a subset of the original files by filtering them using globbing.
• UglifyJS — Minifies JS files
• ImageMin — Minifies PNG, JPEG, GIF and SVG images
• Newer — For passing through only those source files that are newer than corresponding destination files.
• Rename — To easily rename files
• Concat — To concatenate JS files
• Notify — To send notification to OS based on node notifier module
• Combine Media Queries — To combine repetitive media queries after Sass or Less
• Run Sequence — Run a series of dependent gulp tasks in order
• Gulp Sass — Gulp plugin for Sass which is based on libSass
• Load Plugins — To automatically load in gulp plugins
• Ignore — To ignore files in the stream based on file characteristics
• Zip — To zip or compress files
• Plumber — Fix node pipes, prevent them from breaking due to an error
• Cache — A cache proxy task for Gulp
• Source Maps — Source map support for CSS partial files

Phew! That was a lot. Well, at the end of the day, it’s all worth the effort.

Step #3: Task to Setup Browser Sync#

Let’s dive a little deeper and create some awesome tasks to automate our workflow. Browsersync is one of my favorite plugins.

I used to have LiveReload in my workflow, which would reload the web page whenever a file gets edited and saved. But when Browsersync was introduced, it helped me cut down half of the shitty things I had to do in order to automate syncing between different browsers. Browsersync helps me with the following stuff;

• Injecting CSS changes without any web page getting reloaded
• Change the port and set up a tunnel through a random public URL, which means my teammates can access the dev branch live at my localhost in a matter of minutes
• Synced testing across different browsers, where I open the given URL at my Desktop, Laptop, Tab, and mobile to test same features in a single go with synced scroll, clicks, form inputs, etc. Watch the video at Browsersync.

Step #4: Gulp Style Task#

Let’s take a look at the styles task I built. In this task, there is a lot going on. We are compiling Sass, creating minified CSS and optimizing media queries.

Let me explain line by line, what’s going on in there

• L#1 – L#8 — I created the styles task
• L#9 — Here I provided the source of Sass file, which is a style.scss file present at ./assets/css/style.scss
• L#10 — Initiated plumber to avoid pipe breaking due to minor CSS errors when I save a file
• L#11 — Sourcemaps got initiated. A source map provides a way of mapping code within a compressed file back to its original position in a source file. This means that – with the help of a bit of software – you can easily debug your applications even after your assets have been optimized. The Chrome and Firefox developer tools both ship with built-in support for source maps.
• L#12 – L#20 — Sass is being compiled in compact format, you can read about Sass formats here
• L#23 — I am prefixing CSS with autoprefixer. The legacy browsers which should be supported are mentioned inside the arguments array
• L#26 — Here I have saved the final compiled CSS file for our WordPress theme in the root directory. Since style.scss was being compiled, the output will be style.css file. Now all you need to do is make sure you use a “!” in the comments at the top of the style.scss file so that, even when the compiling/compressing happens, the comment remains: i.e. /*! Theme Name: Your Theme etc... */
• L#27 — I filtered all the .css files in the root directory, which at the moment is one style.css file
• L#28 — Combined the media queries inside selected files
• L#30 — Renamed the file to style.min.css
• L#31 – L#33 — Minified the style.min.css file
• L#34 — Output was saved as a style.min.css file in the root of WP theme folder

Step #5: Scripts Minification and Concatenation#

Now to deal with custom JavaScript files and 3rd Party JS files, I have created two tasks called vendorsJs and scriptsJs. They both are pretty much similar. Let’s review the code.

Here is what’s happening in there

• I selected the vendor JS files paths with bower path at L#7 and the custom JS files paths at L#27
• Concatenated the files to two single files called vendors.js and custom.js
• Saved the output in ./assets/js/ folder
• Renamed the files to with .min suffix
• Minified/uglified the files
• And saved two more files called vendors.min.js and custom.js

Step #6: Image Optimization Task#

There nothing new in the image optimization task. Look at the code below.

• I selected the ./assets/img/raw/**/*.{png,jpg,gif} path as a source
• Optimized the images and placed them in ./assets/img/ folder

Step #7: Building a Clean Installable Theme Zip File#

This is a group of tasks which are responsible for creating a clean copy of installable theme zip file. Take a quick look at the code. There is nothing much to it, it is all basic copy pasting and deleting or ignoring of files/folders.

This task will run only when I will use gulp build command. Let’s review what happens when this command is run

• clear: Task to clear the gulp cache
• cleanup: Task to remove sass-cache, bower_components and .DS_Store files in the stream. It also ignores the node_modules folder
• cleanupFinal: Another cleanup task to be run at the end of build sequence. It may or may not have any difference from cleanup task
• buildFiles: Build task that moves essential theme files to the buildTheme folder
• buildImages: Task to build and copy the final set of images to the buildTheme folder
• buildZip: Task to create an installable Zip file of the buildTheme folder
• build: Main task which runs styles task to compile CSS then cleans up everything with a cleanup task. After that, it runs all the scripts related and build related tasks and a final cleanup task at the end to produce a theme zip file via buildTheme folder.

Step #8: Watch Task#

Finally, there is a watch task which helps in automatically running the styles, scripts, images and browser-sync related tasks in case of any change that occurs in the below-mentioned folder.

Final gulpfile.js#

What About You?#

Well, that’s about it. I’d love to see how you people use Gulp to automate front-end related grunt work. If you have any questions or any suggestions, let me know in the comment section below.

I’d also like to mention and thank Chris Coyer, Alex Vasquez, Matt Banks and all the Gulp contributors, who have helped me along the way with their GPL/MIT based code and contributions. Pull requests are welcomed.

Did you like what you read? Tweet About Advanced Gulp Workflow for WordPress.

JUST A NOTE!
👨‍💻 I’m teaching thousands of devs how to become VSCode Power Users →
✅ This site is super fast?! It’s hosted with Kinsta on Google servers →