SPRO is a boilerplate of predefined Gulp tasks. The mission is to set up the development environment for your project without writing Gulp tasks again and again. In this article, I am going to show you how to configure SPRO for custom WordPress theme development.
If you want to learn more about SPRO, read the introduction article from the last week.
If you prefer watching a video over reading an article, you could proceed to the Skillshare lesson that I recorded for this occasion.
I am going to use a default WordPress installation as my starting point. I am using Local by FlyWheel as my WordPress development tool.
I have reorganized the code in the theme. First, I have created a new folder called
css and moved all Sass files and
sass folder in it. Next, I have created a new folder called
src, and moved newly created
css folder and existing
js folder in the
The project structure looks like this:
To install SPRO, run
npm install starter-project-cli -s command, and then run SPRO by executing
node_modules/.bin/spro start command. SPRO is also available for global installation. Now you should be prompted to answer questions about the project architecture and Gulp tasks.
Here are my (shortened) answers:
GENERAL | Do you want to override the project? Yes
After the installation, SPRO would copy Gulp tasks and configuration files in the
To be able to run Gulp tasks, we should install all required dependencies. You could find the installation command in your terminal, right after the questions. Paste the command in your terminal, and hit Enter.
Now that we have all required Gulp tasks and dependencies, we could configure SPRO.
Let’s start with BrowserSync. I want to use the BrowserSync to preview the changes in the browser. Local by FlyWheel tool have configured the local site domain for me. In my case, it is
spro-wp.v. I am going to use the local domain as a proxy for BrowserSync.
Next, we should update the URL for extracting Critical CSS to match our development domain in the
There are other options here, but the most important ones are
src option tells which file to use as our source file for extracting Critical CSS, and
out option tells in which file should Penthouse store the extracted Critical CSS code. To learn more about Penthouse, visit the official Penthouse site.
Also, we should create a new Sass file in the
sass folder called
To view the list of available Gulp tasks, run
gulp --tasks command. We have four tasks:
cleanfor cleaning the compiled code, and
- three tasks for development:
If you run
default Gulp task, the site should open in the browser.
Since our compiled code is stored in the
functions.php file, update the
footer.php file, add a link to the main style file just before the closing body tag:
<link rel="stylesheet" href="<?php echo get_theme_file_uri('/build/css/style.css'); ?>">
Ideally, we should defer the loading of the uncritical CSS file, as suggested by Google.
Next, let’s inline Critical CSS in the head of the HTML document, in the
If you followed the instructions correctly, you should be able to run
gulp command in your terminal. Gulp should compile the code, then open the site in the browser, then extract the Critical CSS and then refresh the browser.
As you could see, I have never touched any of the Gulp tasks, just configuration file. This is exactly what SPRO is all about.
If you have any feedback, it would be appreciated. SPRO is in its early stages, and more features could be added soon.
Please spread the word. More lessons are coming soon! 📣