WordPress Theme Automation With Gulp

As website code becomes more complicated and repetitive steps that just beg for optimization become ever more commonplace, there should be a better and more efficient development process out there.

In this tutorial, I’ll introduce Gulp, and how to integrate it with WordPress theming to automate and enhance the theme development process by putting together an automated workflow.

Why You Need to Automate Your Development Workflow

Workflow optimization can be incredibly beneficial and rewarding for your development process. Here are some of the reasons to give it a go:

• It removes all those repetitive and boring tasks, replacing them with custom tools.
• It saves a lot of time for doing other important core development work.
• It helps optimizes your website for performance by minifying and optimizing all assets.

What You'll Need

• WordPress installed on your development machine.
• Node.js and npm installed.
• Command line basic knowledge.

Introduction to Gulp

Gulp is a JavaScript task runner that will help automate time-consuming tasks like CSS compressing, Sass compiling, image optimization and browser reloading.

Gulp gives you the tools to do various actions automatically after certain trigger events. For example, consider the following scenarios:

• Every time you save a Sass file, Gulp will compile Sass and output a minified CSS file.
• When you add a new image to a folder, Gulp will optimize this image and move it to a new dedicated folder.
• When you save a PHP or a Sass file, Gulp will automatically reload the browser.

Gulp Setup

First, you need to install Gulp globally in your system. Later, I will show you how to install it as a package inside your theme.

Assuming Node.js is installed, open the command line tool, then install Gulp using npm via:

[code language="bash"]
npm install gulp -g
[/code]

Now, run gulp -v (Gulp's version command) to test that Gulp is installed correctly. You should get output similar to:

[code language="bash"]
➜ ~ gulp -v
[09:33:59] CLI version 3.9.1
[/code]

Theme Setup

In this tutorial, I will use Underscores as the base theme. To download it, navigate to underscores.me, generate a new theme and give it a name like "gulp-wordpress", download it to the WordPress themes directory, then activate it from the dashboard.

From the command line, navigate to the gulp-wordpress directory where you have added the theme, for example in my case:

[code language="bash"]
cd ~/www/wordpress/wp-content/themes/gulp-wordpress
[/code]

Next, run the npm init command and follow a few simple steps to create a package.json file which will include some information about the theme and the packages that will be installed later.

After finishing up the steps, you will have a starting file that looks similar to this:

{
  "name": "gulp-wordpress",
  "version": "1.0.0",
  "description": "WordPress Theme Development Automation with Gulp",
  "author": "Name"
}

Next, install Gulp as a development dependency:

[code language="bash"]
npm install gulp --save-dev
[/code]

A node_modules directory is now created containing Gulp package source files, and your package.json file has been updated to include Gulp as a development dependency.

{
  "name": "gulp-wordpress",
  "version": "1.0.0",
  "description": "WordPress Theme Development Automation with Gulp",
  "author": "Author Name",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

Some Gulp tasks like gulp-autoprefixer require ES6-style Promises support so that you can install the es6-promise polyfill, and then require it at the top of the gulpfile.js as we will do next.

[code language="bash"]
npm install es6-promise --save-dev
[/code]

The last step to configure Gulp is to create an empty gulpfile.js configuration file, which will be used to define Gulp tasks such as JavaScript and Sass.

The gulpfile.js starter file will look like this:

require('es6-promise').polyfill();

var gulp = require('gulp');

// default task
gulp.task('default');

What we have done above is:

• Required the es6-promise polyfill on top of the file, then we have imported in gulp.
• Created a default task.

To make sure that Gulp is running and everything is done perfectly, run gulp in the command line to execute the default task created in the gulpfile.js file. The output should be similar to:

[code language="bash"]
[09:48:23] Using gulpfile ~/www/wordpress/wp-content/themes/gulp-wordpress/gulpfile.js
[16:33:13] Starting 'default'...
[16:33:13] Finished 'default' after 58 μs
[/code]

Speeding up Development with Gulp Tasks

At this point, the theme is ready for new tasks, and it's time to go through some common tasks that you can use to speed up your theme development.

Working with CSS (Sass)

If you are using Sass to write CSS, two main things needed to be automated, the first one is to compile Sass to CSS, the second is to use autoprefixer to add vendor prefixes to your CSS. Also note that I'm using Sass as an example, if you prefer another option like Less for example, you can find a Gulp plugin for it too.

First, install gulp-sass and gulp-autoprefixer.

[code language="bash"]
npm install gulp-sass gulp-autoprefixer --save-dev
[/code]

The next step is to create a Sass directory with a basic structure.

├── sass
│   └── style.scss

The style.scss file is the main starting point, you are free to create your Sass architecture and import other components, modules, functions inside it based on your preference.

Continue reading %WordPress Theme Automation With Gulp%

by Ahmad Ajmi via SitePoint