Ahmad Awais



My Advanced Gulp Workflow for WordPress Themes

Ahmad AwaisAhmad Awais

If you are an absolute beginner when it comes to Gulp, you might want to read Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate. Moreover, this post is just an article, which hasn’t been updated in a long time. I maintain this workflow under WPGulp repository. I suggest you all to read this post to get an idea and use WPGulp instead.

If you are not using Gulp or any task runner, believe me when I say that you are missing out on all the front-end fun stuff. Today, I intend to share my advanced Gulp based automated workflow for building WordPress themes, with the community.

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.

👨‍💻 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:

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.

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

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

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

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;

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

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

Step #6: Image Optimization Task#

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

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

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.

👨‍💻 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 →

I help businesses understand developers 📟 Launching Node.js CLI Automation Course 👨‍🏫 Edutainer at VSCode.pro 🎩 An award-winning open-source engineer and developer advocate 🦊 Google Developers Expert for web 🌳 Node.js foundation Community Committee member ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer 📣 TEDx Speaker 🙌 Leading developers and publishing technical content for over a decade 😂 Self-confessed tech comedian working with the JavaScript web and cloud communities 💜 Loves his wife (Maedah) ❯ Learn more about Awais ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the Developers Takeaway!


Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam — pinky-promise!

👨‍💻👩‍💻 115,834 Developers Already Subscribed