My Advanced Gulp Workflow for WordPress Themes
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.
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.
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.
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.
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.
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.
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.
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
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 fileI 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.
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;
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
styles
task./assets/css/style.scss
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... */
style.css
fileNow 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
./assets/js/
foldervendors.min.js
and custom.js
There nothing new in the image optimization task. Look at the code below.
./assets/img/raw/**/*.{png,jpg,gif}
path as a source./assets/img/
folderThis 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
cleanup
taskFinally, 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.
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 →
Copy and paste this URL into your WordPress site to embed
Copy and paste this code into your site to embed