Gulp for WordPress

Gulp what?

“gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.” – GulpJS.com

“gulp is the most confusing thing I’ve ever tried to do on my own.” – Scott Stewart

Gulp when?

When to use Gulp:

  • When you want to do work quickly

Basically, you can run it once when you start to work and it will do most tasks for you in the background… It’s watching you work, literally

  • When you want to minify, compress, or move from SASS to CSS

AKA: Most tasks that you do in theme development and some in plugin development

  • When you’re doing front-end development

It is incredibly useful for front-end development

Gulp where?

Long story short, it’s just a JS file that sits in your theme or plugin directory. You can modify the JS file to do practically anything with the front-end.

Short story, long:

  • You’re going to have to install a bunch of dependencies if you haven’t already
  • You’re going to have to test it’s location, depending on the theme or plugin directory
  • You’re going to have to bang your head against the desk, occasionally, because it will run but not do the task you set it up to do

Gulp why?

IF this sounds like a pain, it’s really not.

I’m here to help simplify and make it easier for you. I’ve created a couple of gists to get you up and running on most directories.

Gulp how?

Let’s get down to the nitty gritty: How do I do the amazing things you’re talking about?

I’m going to assume a few things here:

A.) You know what a terminal is

B.) You know what CSS, JS, and SASS is

C.) You are engaged and ready to rock and roll

npm install

You’re going to need NPM on your machine, globally.

That means, you need Node.js on your computer.

This is actual software at this URL: https://nodejs.org/en/

When you download this, NPM is installed

To check if you have NPM or Node installed, open your terminal:

node –v

npm –v

npm install gulp

Once you have node and npm on your computer, you have access to install Gulp.

You should do this globally at first:

npm install –global gulp-cli

Then, in your project directory:

npm install –save-dev gulp

Create gulpfile.js

Next step, creating the bad-ass file.

If you like to test things, you can create a simple file at first to make sure everything is running properly THEN go crazy. This is your test code below. Simple command: gulp

var gulp = require('gulp');

gulp.task('default', function() { //empty for a reason

});

Adding functionality to your gulpfile.js

If you already know JS like the back of your hand, this may bore you, but a well written gulpfile.js is the key to any good automated workflow.

Let’s take a look at the gist I wrote for theme development and gulp.js. This is written for Underscores starter theme. Sage by the Roots team already comes with a gulp.js file.

Looking for more?

Good, this is a simplified workflow. A great example of the POWER OF GULP is used on the Sage starter theme by Gulp. It is loaded with goodies.

Some pro tips about Sage:

Be sure to run both Bower install && npm install

Even though Bower is being phased out, 8.5.1 version of Sage uses Bower

Be sure to globally install browser-sync and run browser-sync in the theme directory

npm install –g browser-sync

browser-sync start –proxy “localhost/gulp-example” –files   “style.css”

 

But, you cry, What about Plugins?

I’m glad you asked. If you’re going to have custom styles or JS in your plugin, you can add gulp easily. It all depends on your directory.

I used the Plugin Boilerplate and added it to the /public folder where all the assets were. If your plugin is set up differently than this, obviously put the gulpfile.js in the correct folder, link up correctly, and install all your dev dependencies.

Let’s take a look at the difference on the gist I created.

 

Happy coding and have a blast with front-end development! It’s so much better with gulp.js

Categorized in: Web Talk

About the author

Scott Stewart is a freelance WordPress developer. He has developed websites for small businesses, writers, artists, and corporations. He utilizes the flexibility of WordPress to craft beautiful and elegant websites. He hails from a small town in Oregon, but now lives in San Diego, CA. He is available for hire.

Leave a Reply

Your email address will not be published. Required fields are marked *