Here’s how we develop WordPress websites using Sass and Gulp. At least for this week. We use it to compile Sass, concatenate and minify Javascript, and optimize images. It will also LiveReload when saving Sass files.

1. Install node.js

If you don’t already have Node installed, get the download packages here: http://nodejs.org/download/. Run the package as you would install any other application.

2. Add pacakge.json to your theme

[js]
{
"name": "Spigot",
"version": "11.3.0",
"author": "Spigot",
"license": "GNU General Public Licence 2.0",
"devDependencies": {
"gulp": "",
"gulp-ruby-sass": "",
"gulp-sass": "",
"gulp-livereload": "",
"gulp-plumber": "",
"gulp-autoprefixer": "",
"gulp-minify-css": "",
"gulp-rename": "",
"del": "",
"gulp-concat": "",
"gulp-jshint": "^1.9.0",
"gulp-cache": "",
"gulp-uglify": "",
"gulp-notify": "^2.0.1",
"gulp-imagemin": "^2.0.0",
"imagemin-pngquant": "^4.0.0",
"gulp-strip-debug": "^1.0.2",
"gulp-sourcemaps": "^1.3.0"
}
}

[/js]

This file determines the dependencies of the project.

3. Open your command line app, cd to your theme, and run:

[ps]
npm install
[/ps]
You may need to sudo if the command fails. This will install a node_packages directory within your theme that contains all the files necessary to run Gulp tasks. This may take some time…

4. Add gulpfile.js to your theme

Here’s the gulpfile we’re currently using:

[js]
var gulp = require(‘gulp’),
sass = require(‘gulp-ruby-sass’),
sourcemaps = require(‘gulp-sourcemaps’),
livereload = require(‘gulp-livereload’),
prefix = require(‘gulp-autoprefixer’),
plumber = require(‘gulp-plumber’),
notify = require("gulp-notify"),
uglify = require(‘gulp-uglify’),
rename = require("gulp-rename"),
imagemin = require(‘gulp-imagemin’),
pngquant = require(‘imagemin-pngquant’),
concat = require(‘gulp-concat’),
sourcemaps = require(‘gulp-sourcemaps’);
stripDebug = require(‘gulp-strip-debug’);

// Styles
gulp.task(‘styles’, function() {

return sass(‘scss/style.scss’, { style: ‘expanded’, lineNumbers: true })
.on(‘error’, function (err) {
console.error(‘Error!’, err.message);
})
.pipe(gulp.dest(‘.’))
.pipe(livereload())
});

// Compress JS
gulp.task(‘compress’, function() {
gulp.src(‘js/*.js’)

.pipe(uglify())
.pipe(rename({suffix: ‘.min’ }))
.pipe(gulp.dest(‘js/build’))
.pipe(notify({ message: ‘Compression task complete’ }));
});

// Concat Plugins, Minify
gulp.task(‘plugins’, function() {
gulp.src([‘js/plugins/*.js’])
.pipe(concat(‘plugins.js’))
.pipe(stripDebug())
.pipe(uglify())
.pipe(rename({suffix: ‘.min’ }))
.pipe(gulp.dest(‘js/build’));
});

// Watch

gulp.task(‘watch’, function(){
livereload.listen();
gulp.watch(‘scss/**/.scss’, [‘styles’]);
gulp.watch(‘js/.js’, [‘compress’]);
gulp.watch(‘js/plugins/*.js’, [‘plugins’]);

});

// Images
gulp.task(‘images’, function () {
return gulp.src(‘img/icons/*’)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(‘img/build/’))
.pipe(notify({ // Add gulpif here
title: ‘Gulp’,
subtitle: ‘Success!’,
message: ‘Successfully compressed images’,
sound: "Beep"
}));
});

// Default
gulp.task(‘default’, [‘styles’,’watch’]);
[/js]

This file defines the tasks that Gulp will run. Here’s what each task will do:

1. Styles: Runs Sass on style.scss. Current file is set to output in Expanded style with line numbers. Change expanded to compressed for production.
2. Compress: Compresses .js files within the /js directory. Outputs to /build and adds .min to the file name.
3. Plugins: Concatenates and compresses any .js file within the js/plugins folder. Outputs to /build/plugins.min.js
4. Watch: Watches for changes in the above three tasks, and runs the task.
5. Images: Compresses images within the img/icons directory. Outputs to img/build.
6. Default: Default tasks to run when you start Gulp

5. Run Gulp

In the command line, be sure you’re still in your project directory and run:

[ps]gulp[/ps]

This will start the default tasks, and starts watching for changes to Sass and Javascript files. You should be off to the races at this point.

6. Gulp Images

Compressing images isn’t included in the watch task. To run this task, or any other task, enter:

[ps]gulp images[/ps]

Boom, compressed images.

7. LiveReload

Running Gulp will start a LiveReload server, but to get it to work you’ll also need the LiveReload extension for your browser. Get LiveReload extensions here.

Troubleshooting

If you’re having trouble getting this to work, your theme may have a different Sass/js/image file structure. Grab a copy of our Infusion theme on Github to see how we’re currently set up. Infusion is our WordPress starter theme for most projects. It’s a skeleton theme, built on Hybrid Core, Sass, and Bourbon. Free to use and modify.

Improvements

One thing I’d really like to add is notifications. A previous version of this used gulp-plumber to output OS X notifications, but the latest version of gulp-ruby-sass doesn’t appear to support it. I could be wrong.

If you’ve got a task that should be added to this, let me know. It’s been great to move on from Codekit and have more control.