Basic gulpfile configuration for stylus, live reload, and browsersync on a WordPress build. #wordpress

gulpfile-stylus.js

// Load gulp
var gulp = require('gulp'); // npm install gulp --save-dev

// Load necessary packages
var stylus = require('gulp-stylus'); // install --save-dev gulp-stylus
var autoprefixer = require('gulp-autoprefixer'); // npm install gulp-autoprefixer --save-dev
var browserSync = require('browser-sync'); // npm install browser-sync --save-dev
var reload = browserSync.reload; // npm install gulp-livereload --save-dev

// Define the styles task
gulp.task('styles', function(){
	gulp.src('wp-content/themes/theme-name/styl/style.styl') // Pass in the source file (or files) for the task
	.pipe(stylus()) // Call in the stylus plugin to compile the file(s)
	.pipe(autoprefixer({
			browsers: ['last 2 versions'] // Call in autoprefixer (latest 2 version) on our compiled css file
		}))
	.pipe(gulp.dest('wp-content/themes/theme-name/')) // Define where to put the "style.css" files when the task is completed.
	.pipe(reload({ stream : true })) // Call live-reload in browser each time a change is made to the style.styl file.
});

// Define the browser-sync task
gulp.task('browser-sync', function(){
	browserSync({
		proxy: 'localhost:3000' // Or whatever host the site is being served from.
		})
});

// Define the watch task
gulp.task('watch', ['browser-sync'], function(){
	gulp.watch('wp-content/themes/theme-name/styl/**/*.styl', ['styles']); // watch all these files for changes, and apply the 'styles' task.
});