Gulp, SCSS and WordPress

Ive been using gulp and live reload for many years now. It’s super efficient.

Gulp, SCSS aka (sass) and WordPress can be a bit tricky though. Mostly because the typical SCSS structure is to put the final files in directories that aren’t necessarily WordPress friendly or WordPress structured. Also if you are trying to compress it, you will get your comments stripped out, this is a huge WordPress problem as it uses comments at the top to identify themes and load themes.

Compression Tip

A little trick for preserving the theme name and description if you are wanting to utilize sass compression.
The standard WordPress theme header in style.css

/*
Theme Name: Fancy Theme
Theme URI: http://www.website.com/
Description: Fancy Theme is the best of the best!
Author: Craig Smith
Author URI: https://www.webbernaut.com/
Version: 1.0
*/

To preserve this comment at the top just add an ! at the beginning. This is well documented on the sass website.

/*!
Theme Name: Fancy Theme
Theme URI: http://www.website.com/
Description: Fancy Theme is the best of the best!
Author: Craig Smith
Author URI: https://www.webbernaut.com/
Version: 1.0
*/

Retaining Style.css Tip

Usually compiling a scss file you output to something like app.css, but hiding styles in a WordPress theme I feel is bad practice. Too many times I have pulled up the style.css of a paid theme or someone else’s custom theme and there was either just a single line that imports some other file or literally blank with only the theme header comments. Don’t hide your styles in some weird place use this method!

Create a file inside your theme called style.scss, then use gulp to output to style.css

Inside your gulp.js file use this code:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('wp-content/themes/*/style.scss', { base: './' }) //sets base to current directory
        .pipe(sass().on('error', sass.logError)) //error output for debugging
        .pipe(gulp.dest('.')); //writes to src directory
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['sass']);

MacOS alternative to Live Reload

When I used a Windows machine way back when I used live-reload module, but that doesn’t work with a Mac. Instead use browser-sync. Below is my setup for running a live reload approach with sass and WordPress. Hopefully this will help those Mac users out there.

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();

gulp.task('reload', function() {
     browserSync.init({
         port: 8080, // Use a specific port (instead of the one auto-detected by Browsersync)
         proxy: "localhost/wordpress", // Using localhost sub directories change to your project directory
         files: "wp-content/themes/*/style.scss, wp-content/plugins/*/*.php, wp-content/themes/*/*.php, wp-content/themes/*/js/*.js, wp-content/themes/*/*.css, *.php, .htaccess"
    });
});

gulp.task('sass', function() {
    return gulp.src('wp-content/themes/*/style.scss', { base: './' })
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('.'));
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['reload', 'sass'], function() {
    return gulp.watch('content/themes/*/style.scss', ['sass']);
});