Using Gulp for WordPress Theme Development
Keep reading to find out how to use gulp with your WordPress themes to speed up your development and stay on the bleeding edge.
What is gulp?
It makes sense to look at how it works compared to Grunt, since that’s how I wrapped my head around gulp.
How is gulp different than Grunt?
Let’s dive right in and see how to use gulp for developing WordPress themes.
Using gulp with WordPress Themes
I have two WordPress starter themes setup that I use and you can watch, fork or download as well: one for use with most WordPress themes and one for use with the Genesis Framework. The master branch on Github currently uses Grunt, as broken down in my article on Using Grunt for WordPress Theme Development and Deployments, but there are separate “gulp” branches for each configured to use gulp tasks (WordPress Starter Theme gulp branch / Genesis Starter Child Theme gulp branch). I plan on merging the gulp branches into the master branch at some point in the near future as I plan on using gulp going forward.
First, make sure Node and gulp are installed on your system, and then create a
package.json file in the root of your theme to define your dependencies.
[* Please note, package.json is subject to change. Check my Grunt WordPress and Drupal repositories on Github for the latest versions]
With that in your theme, you can then open the theme folder in your Terminal and run:
This will tell NPM to download all dependencies and put them in a
node_modules folder. Now we’re ready to create our
[* Please note, Gruntfile.js is subject to change. Check my Grunt WordPress and Drupal repositories on Github for the latest versions]
We first load all of our plugins and setup the
livereload server. You’ll need to install the LiveReload browser extension to connect, which you can get for Chrome, Firefox or Safari. Next, we setup our tasks for our stylesheets. The
gulp.src of the tasks defines which files will be processed when the task runs. Here, we specify all SCSS files inside
assets/styles/source (but not files in subfolders). We then use Node.js piping to take those files and process them with SASS, run Autoprefixer to put in vendor prefixes as needed, copy the files into a build directory uncompressed, then minify the stylesheets and place them in the theme root, as well as triggering a LiveReload in the browser.
Instead of configuring SASS, Autoprefixer, Minification and LiveReload separately, we have them all piped together in code block for our stylesheets. For me, this is so much more logical and easier to use, maintain and extend. Plus, piping makes it extremely fast!
Separate script processing blocks are setup for vendor plugins and app/site scripts to spit out
main.min.js files. In those blocks, we’re concatenating plugins and scripts, running them through JSHint to check for syntax issues and Uglify to compress everything, and then copying files to proper destinations and triggering a LiveReload.
Images are processed in the next gulp task, where any new images are passed through Imagemin to compress JPG, GIF and PNG images down before triggering a LiveReload. The
cache plugin makes sure that images aren’t processed multiple times, so you don’t need to worry about tasks bogging down every time you add a new image.
You’ll notice that each task has a
notify plugin associated at the end, which triggers an operating system notification to let you know the task is complete (in Mac, it’s in Notification Center). You can safely remove them if you don’t want to be bothered every time gulp processes a file.
We next setup our
watch task, where we’re monitoring files for changes and triggering our appropriate gulp tasks as needed. Lastly, we define our default task to run each of the tasks initially and then start watching our files for changes.
To get going, fire up your Terminal and navigate to your theme directory and run:
Gulp could use more tasks
I’m really enjoying gulp as a task runner, particularly for speed and efficiency of setting up the