Gulp configuration for WordPress — Part I

4 min readSep 2, 2019

As I explained in the previous article, I almost always use the same Gulp configuration for my WordPress projects.

The configuration I use compiles and minimizes the CSS adding also the cross-browser prefixes, convert the JS ES6 files to ES5, compresses the images and creates a small server to view the site. It also automatically updates the page when a JS or PHP file is updated and injects the compiled CSS directly into the page without needing to update the page.

In two posts, I want to explain in detail how to write this configuration so you can use it if it seems right for you.

I won’t go into Gulp’s operation in detail, assuming that you already know what it is. If you want a much more detailed explanation that goes step by step, I refer you to this link, where you can deepen in detail this configuration. My version comes from the one you will find in that post but simplified and lightened of some tasks.

Let’s start by putting meat in the fire, without dwelling too much.

The structure of the folders

First of all, you have to set up your folder structure so that you can split the files that will be the source and the files that will be compiled by Gulp.

The order you will have to follow is this:

themefolder/ 
 ├── index.php 
 ├── style.css 
 ├── src/ 
 │   ├── images/ 
 │   ├── scss/ 
 │   └── js/ 
 │  
 ├── dist/ 
     ├── images/ 
     ├── css/ 
     └── js/

In src will go all the files to compile, while Gulp will fill dist with the compiled and minified files.

Use ES6 also for Gulp

To be able to write the Gulp configuration in ES6 you need a tool that compiles the Javascript in a version that can be used by browsers.

Babel is one of these tools. Then we install Babel and create the Gulp configuration file in the root directory, called gulpfile.babel.js

npm install --save-dev @babel/register @babel/preset-env @babel/core

Now in the main folder, we add the file that Babel will need to compile the ES6. Call it .babelrc and write inside:

{ 
  "presets": ["@babel/preset-env"] 
}

Now we can use the arrow functions and all the other comforts of ES6 to write tasks to the file gulpfile.babel.js.

The indispensable modules

All the modules we will use are obviously indispensable, but the first two that you will have to install are gulp and gulp-cli.
The last one will be installed with the --global option, so you can use it every time for other projects.

npm install --global gulp-clinpm install --save-dev gulp

We also want to use the --production flag when our project is ready for deployment. The reason is that it is useless to minify CSS and JS during development. This way we will be able to work faster, and we will leave the minification only for the production version.

To do this we use the yargs module:

npm install --save-dev yargs

Task style modules

With the style task, we want to compile the SCSS files into one file, compile it into CSS by adding the cross-browser prefixes, minify it and add it to the dist directory.

To do this we will need the modules of Gulp gulp-sass, gulp-clean-css, gulp-postcss, autoprefixer.

In addition, we also want that by analyzing the site from the devTools Browser, we can see exactly which file the style comes from, instead of sending all the CSS rules to the compiled file. (It will be clearer later)

To do this we will also need the gulp-sourcemaps module.

So let’s install all the modules useful for the style:

npm install --save-dev gulp-sass gulp-clean-css gulp-postcss autoprefixer gulp-sourcemaps

Modules for the task image

For images, we will need a module that compresses the files.

For this, there is the module gulp-imagemin:

npm install --save-dev gulp-imagemin

Modules for task scripts

For JS files, we need a module that allows us to convert ES6 files to ES5. That’s why we have Webpack.

But we only want to work with Gulp, without touching other configuration files such as Webpack. For this reason, there is the webpack-stream module that allows us to use Wbpack directly from Gulp.
To be able to work we also need a loader, in this case babel-loader.

npm install --save-dev webpack-stream babel-loader

BrowserSync

To update your browser automatically with each change we need BrowserSync.

npm install --save-dev browser-sync gulp

That’s all for today, we have all the modules we need. In the next post, we will write the tasks and see the configuration at work.

Last important modules

Last but not least, we need a couple of modules in order to manage the if statement in our gulpfile.babel.js and to clean the dist folder

npm install --save-dev gulp-if del