Developing WordPress Themes with Gulp: A Brief Introduction

If you regularly develop WordPress themes, you should definitely use a task runner to automate recurring tasks. Personally, I prefer and use Gulp instead of Grunt because it allows for a simple and slim build.

What can Gulp be used for?

The possibilities are practically endless due to the large number of available Gulp plugins. For example, I'm currently using these modules:

• Automatic insertion of browser / vendor prefixes with autoprefixer
• Minification of Javascript files with gulp-uglify
• Automatic creation of right-to-left (RTL) language stylesheets with gulp-rtlcss
• Sorting CSS properties for better readability with postcss-sorting

Gulp installation

To use Gulp you need Node.js, which can be downloaded from node.js.org . You can install Node.js on your PC like a normal program.

After installing Node.js, the terminal or the command line must be opened in order to continue with the Gulp installation. For Windows users, I can also recommend Cmder for a nicer console.

The following command can now be entered in the terminal to install Gulp with the Node Package Manager (NPM) (note: enter without $):

 $ npm install gulp --global

The global installation ensures that the gulp command can be called anywhere in the terminal.

Create a project for a WordPress theme

You can then cd to the directory of the WordPress theme in the console with the cd command. With cd .. you can change to a higher directory.

Example:

 $ cd wp-content / themes / theme-name /

Then a new node project is created in the theme directory with npm init . All project package.json saved in the package.json file.

 $ npm init

The requested data are not important and can all be confirmed with ENTER.

Install Gulp plugins

Now Gulp will be installed again locally for the project. In addition, the desired Gulp plugins can be installed for the project.

 $ npm install gulp --save-dev
$ npm install gulp-rename --save-dev
$ npm install gulp-uglify --save-dev

As an example I use gulp-rename and gulp-uglify , with which we will create our first task in a gulp-uglify . After the installation a new folder /node_modules appear in the theme directory, which contains the installed modules.

Create Gulpfile.js

The last step is to create a new JavaScript file with the name gulpfile.js . The following code can be added to the file to create a fully functional first task.

This short task copies the /js/navigation.js file, minifies it, renames it to navigation.min.js, and saves it in the same / js folder. For this example, please make sure that your theme also contains a /js/navigations.js file.

Let's take a closer look at the task. In the first 6 lines Gulp and the plugins are loaded. The actual task is structured as follows:

• Line 9: With gulp.task a new task with the name minifyjs is created
• Line 10: The source files for the task are specified with gulp.src
• Line 11: With .pipe the source files are sent through a module. We use the plugin uglify() for the minification of the JavaScript code.
• Line 12: The second module rename() is used to rename the file
• Line 13: The destination for saving the new file is set with gulp.dest

Executing the Gulp task

Finally, the newly created task can be called in the console:

 $ gulp minifyjs

As a result, a minified navigation.min.js should appear in your / js folder after the task has finished.

Conclusion

This tutorial is deliberately kept as short as possible and intended as a quick introduction to Gulp.

For detailed instructions on WordPress and Gulp with further application examples, I recommend this article: