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
- Automatic creation of right-to-left (RTL) language stylesheets with
- Sorting CSS properties for better readability with
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.
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.
$ 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
$ 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-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.
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.taska new task with the name minifyjs is created
- Line 10: The source files for the task are specified with
- Line 11: With
.pipethe source files are sent through a module. We use the plugin
- Line 12: The second module
rename()is used to rename the file
- Line 13: The destination for saving the new file is set with
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.
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: