This post was originally published on silvestar.codes.
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.
The Video Lesson
If you prefer watching a video over reading an article, you could proceed to the Skillshare lesson that I recorded for this occasion.
The project structure
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.
The aim is to add Gulp tasks to TwentyNineteen default theme for Sass, JavaScript, BrowserSync, and Critical CSS.
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 sass folder and existing js folder in the src folder.
The project structure looks like this:
|-- src
| |-- css
| | |-- style.scss
| | |-- ...
| | |-- sass
| | |-- _normalize.scss
| | |-- ...
| |-- js
| |-- customize-controls.js
| |-- ...
SPRO installation
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
GENERAL | What is the root folder of the project? ./
GENERAL | Where is the folder with the source code of the project? src
GENERAL | Where do you want to store compiled code of the project? build
GENERAL | Are you sure that you want to override the project? Yes
BROWSERSYNC | Do you want to run BrowserSync to preview changes in the browser? Yes
HTML | Do you want to run HTML tasks? No
CSS | Do you want to run CSS tasks? Yes
CSS | Are you using Sass? Yes
CSS | Where is the folder with CSS source code? css
CSS | Where do you want to store compiled CSS code? css
CSS | Do you want to minify CSS code? Yes
CSS | Do you want to autoprefix CSS code? Yes
CSS | Do you want to add sourcemaps for CSS code? No
CSS | Do you want to lint CSS code? No
JS | Do you want to run JavaScript (es6) tasks? Yes
JS | Where is the folder with JavaScript source code? js
JS | Where do you want to store compiled JavaScript code? js
JS | Do you want to minify JavaScript code? Yes
JS | Do you want to add sourcemaps for JavaScript code? No
JS | Do you want to lint JavaScript code? No
IMAGES | Do you want to run image optimization tasks? No
FONTS | Do you use local fonts? Do you want to run font tasks? No
FAVICON | Do you want to run favicon tasks? No
CRITICAL | Do you want to extract Critical CSS? Yes
COMPRESS | Do you want to compress (gzip) all assets? No
KSS | Do you want to add KSS style guide? No
SASSDOC | Do you want to add documentation for the SASS code (SassDoc)? No
JSDOC | Do you want to add documentation for the JS code (JSDoc)? No
SEMVER | Do you want to add semver versioning tasks? No
YARN | Do you use Yarn as your default dependency manager? Yes
After the installation, SPRO would copy Gulp tasks and configuration files in the gulpfile.js folder.
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.
SPRO configuration
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.
{
"proxy": "http://spro-wp.v"
}
Next, we should update the URL for extracting Critical CSS to match our development domain in the .critical.json file.
[{
"src": "style.css",
"settings": {
"out": "style.critical.css",
"url": "http://spro-wp.v/",
"width": 1920,
"height": 1200,
"keepLargerMediaQueries": true,
"strict": false,
"blockJSRequests": false,
"phantomJsOptions": {
"ssl-protocol": "any",
"ignore-ssl-errors": true
}
}
}]
There are other options here, but the most important ones are src and out options. 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 style.critical.scss.
Running the tasks
To view the list of available Gulp tasks, run gulp --tasks command. We have four tasks:
-
cleanfor cleaning the compiled code, and - three for development:
dev,build, anddefault.
If you run default Gulp task, the site should open in the browser.
PHP updates
Since our compiled code is stored in the build folder, we should update the path for CSS and JavaScript files. In the functions.php file, update the twentynineteen_scripts function:
<?php
/**
* Enqueue scripts and styles.
*/
function twentynineteen_scripts() {
// Will load CSS file at the end of the page
// wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' );
// Will update the path to the JavaScript files
if ( has_nav_menu( 'menu-1' ) ) {
wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/build/js/priority-menu.js' ), array(), '1.1', true );
wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/build/js/touch-keyboard-navigation.js' ), array(), '1.1', true );
}
// Will update the path to the print CSS file
wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/build/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
?>
We are removing the main style file, and we are updating the path to the JavaScript and the print CSS files.
In 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.
Critical CSS
Next, let's inline Critical CSS in the head of the HTML document, in the header.php file.
<?php
$critical = get_template_directory() . '/build/css/style.critical.css';
if ( file_exists( $critical ) ) {
echo '<style>';
require_once $critical;
echo '</style>';
}
?>
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.
Conclusion
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! 📣
Top comments (1)
I am learning to build wordpress themes from youtube. Can I ask you a question as I am stuck in the beginning of a very long playlist?