Header image for Gulp WP Toolkit Build Tasks article.

An Overview of the Gulp WP Toolkit Build Tasks

Once you’ve got Gulp WP Toolkit set up within your WordPress theme you can run any of the available Gulp tasks from the command line. Most of the hard work is carried out by the range of build tasks, including:


gulp build

gulp build runs all of the following tasks, in parallel, in one operation. You might use this if you’ve just cloned a fresh copy of your theme, and want to build all of the theme assets.


gulp build:css

You can run gulp build:css independently to quickly compile new CSS files from your SCSS. By default, this task will compile /develop/scss/style.scss to /style.css. Further configuration should be added to your Gulpfile.js if you’d like to include additional SCSS/CSS files. See documentation.


gulp build:js

The gulp build:js task can also be run independently to compile new JS files from your configured sources. See documentation.


gulp build:images

The image optimisation task gulp build:images will automatically process image files inside /develop/images and output them in /images. Only images which have been changed since the task last ran will be processed.


gulp build:i18n

The internationalizion task gulp build:i18n runs two further tasks in the background.

It uses gulp build:i18npotgen to create (or update) a theme translation template file (.pot) inside develop/languages. The file will be named according to your theme textdomain.

As well as .pot file generation, the internationalizion task runs gulp build:potomo so that any .po files within /develop/languages are automatically converted to .mo files and output in /languages.


Other Build Tasks

There are also a couple of experimental build tasks, gulp build:styleguide uses a tool called Hologram to create a living style guide for your WordPress theme. This is quite fiddly to set up, and will be covered in a later post.

The gulp build:rtl task is also available. It reads the theme style.css file and uses it as a basis to generate an RTL stylesheet at rtl.css. While this is functional, it needs some additional work to expand its coverage to other generated stylesheets.

Reader Interactions

Leave a Reply

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