Development | 08.20.2015

How to Use Gulp in WordPress Theme Development

Next Section

Gulp is a wonderful tool. Gulp (along with the vast library of Gulp plugins) can do many things. It can losslessly compress images, it can compile LESS or SASS, it can concatenate and minify Javascript and CSS, and a huge amount of other tasks (1691 total plugins currently, according to the Gulp plugin registry).

So how do you use this tool in WordPress theme development? Here’s some tips on how to get started on Linux or OSX (sorry Microsoft die-hards, but I haven’t set up Gulp on Windows before). It all starts with the NPM package manager. Head over to nodejs.org and download the latest build of Node if you don’t have it yet. Then you can open up your Terminal and install NPM using NPM (confusing, right?).

sudo npm install npm -g

This will make sure you have the most up-to-date NPM on your system. Create a new folder for your project if you don’t have one and navigate to that folder.

cd /var/www/html/your/projects/directory/here

mkdir superawesomeproject && cd superawesomeproject

First we’ll need to globally install Gulp, then each project will need its own installation of Gulp.

sudo npm install -g gulp

npm install --save-dev gulp

“-g” installs globally, and “–save-dev” installs locally to whatever directory you’re in. Now that we have Gulp installed, we need to tell it what other packages we want to install. We do this by creating a package.json file in the current directory, and specifying packages within that file. For example, here’s my default package.json:

{
	"name": "wordpress",
	"version": "1.0.0",
	"author": "jordancrown",
	"license": "GNU General Public Licence 2.0",
	"devDependencies": {
		"gulp": "3.x",
		"gulp-concat": "2.x",
		"gulp-imagemin": "2.x",
		"gulp-less-sourcemap": "1.x",
		"gulp-uglify": "1.x"
	}
}

As you can see, the packages I’m about to install are Gulp itself, a file concatenation plugin, an image compressor, a LESS compiler with built in CSS sourcemap generator, and the Uglify plugin, which minifies JavaScript. I prefer using LESS, but the process is the same for SASS.

I’m not uploading this project as a NPM package, but a name and version are still necessary for NPM to install your packages for you. Once this file has been created, you’ll need to run the NPM install command.

npm install

You’ll see the terminal spit out a bunch of text notifying you of all the packages it’s installing. After it’s done, you’ll need to create a file that tells Gulp what operations you want it to perform, and on what files. Create a file in the same directory and call it “gulpfile.js”. This file is where you’ll define build functions and required plugins. You can view my example gulpfile here: http://pastebin.com/msvKSGru

In my gulpfile, the first thing I do is define required plugins. Then I define common directory locations like the WordPress theme, and CSS and JS directories. Then finally I define all the various functions I’ll be using in this project. First I have a function for concatenating, compiling, and minifying my LESS, as well as another function that does the same for JavaScript. Then I have a couple functions for compressing images.

My favorite function is the “watch” function. This one “watches” the directories I point it to, listens for any files being saved, and depending on which files I’m saving, it will automatically run the appropriate function.

And that’s it! That’s all you need to get started with Gulp. Poke around the Gulp plugin registry for other plugins you may need.