Ever since I first tried Grunt, I’ve been a huge advocate of task runners. Not only do they significantly speed up your development, they completely automate some of the most repetitive tasks you do on a day to day basis. But more importantly, when you start using them, a plethora of other tools and best practices often emerge to assist you with your workflow. And what developer isn’t keen on constantly learning new and amazing tools?
While Grunt isn’t exactly my cup of tea, Gulp is, which is why I already wrote a tutorial on speeding up your theme development with it. But now, after speaking with a couple of my developer buddies at WordCamp EU 2015, decided to release a starter theme (based on Underscores) that will have a basic Gulp script in order to educate yourself and get up to speed with a few simple commands.
For this theme to fully function, you’ll need two things installed on your computer: Node.js and Bower. The latter is a frontend dependency manager (powered by Node). Essentially it replaces downloading a script manually and putting it into your
js directory with a simple command like this:
$ bower install jQuery
Install it, use it, love it.
The last thing you’ll also need, of course, is Gulp, which should be pretty trivial to install once you have Node.js up and running.
Since we want to enhance our workflow, there should be an existing Apache/Nginx running on your development machine, with everything needed in order to run WordPress properly (which is outside the scope of this article - we covered that already).
Download and activate Sip
Visit our GitHub repository and clone it into your themes directory:
$ cd /your/WordPress/wp-content/themes/ $ git clone email@example.com:codeablehq/Sip.git
Now login into WordPress and activate the theme, then return to the terminal, which is where you’ start Gulp. But before that, we need to make sure all dependencies are installed (forgetting this is a very common mistake we all do):
$ npm install $ bower install
These two commands will look into
package.json (Gulp’s requirements) and
bower.json (Bower’s requirements) and install the necessary dependencies.
Gulp tasks overview
The most important file in this theme is
gulpfile.js. Open it and let’s go through it together:
- The first 10 lines just require in al the necessary scripts and assign them to variables, so we can call them from our tasks
- Line 15 defines a default error handler which prevents Gulp to exit if an exception (an error) occurs. If you write Sass, chances of that happening are relatively high, so better to have a guard in place that will stop Gulp processing rather than exit it.
proxyvalue according to what URL your local WordPress is listening on (usually
localhost.dev). Once BrowserSync server is running, we also set up file watchers that trigger other tasks when files change.
- Line 47 is our Sass-to-CSS task. When ran, it looks at the main sass style (
style.scss), preprocesses it, then saves it into
style.css(more on that shortly)
.jshintrcfile, which you can configure to fine-tune your error reporting. Warning: this task may ruin your day :)
- Line 69 is our default task (every gulpfile should have at least one, default task). Note the second parameter; An array of tasks that need to be executed before the default one is. This task is most often empty because the dependant tasks take care of pieces that make up our workflow.
Note: This theme also comes with a surprise: a fully configured Sass framework that should help you get started in no time. It’s author Zell Liew wrote an excellent ebook on Susy (Sass-based Grid framework) and agreed to relase it to our awesome WordPress community. Thanks Zell!
Now that we have everything in place (and hopefully understand how it works as well), it’s time to run Gulp:
Once you do that, a new browser window should pop up, with
http://localhost:3000 and your WordPress site loaded. Even if you click around, everything should function properly, regardless of what your original WordPress URL is.
In order to test it, I recommend opening
scss/_shame.scss and changing the default anchor color to something other than blue.
You should see all the links on your WordPress site change color without the browser being refreshed. I know this is not a huge thing but I was mindblown for the first time I’ve seen that happen as I didn’t even know that was possible!
Even if you click around your WP site, BrowserSync will keep connecting itself so no matter what page you’re on, the updated CSS will always be injected on the page in real time.
Furthermore, if you update any of the
.php files in your theme, the browser will refresh automatically, no need to put focus out of your code editor.
This theme, like Underscores, is in no way complete but only the starting point and I encourage you to explore the Gulp ecosystem on your own to develop best practices, adapted to your workflow.
I hope you enjoy building off the theme as much I did enhancing it! :)