My Gulp Workflow for WP Themes

gulpfile.js

/*
	
@author: Edir Pedro
@website: http://edirpedro.com.br
@version: 1.1.0
	
## Install Node LTS version to avoid incompatibilities
https://nodejs.org

## Creating NPM package.json
npm init

## Installing a new package
npm install --save-dev package-name

## Install packages from package.json
npm install

## Running tasks
gulp rebuildimages
gulp watch

## Working with includes for Scripts
//=include vendor/jquery.js 
//=include vendor/*.js 
//=include relative/path/to/file.js 

## Folder Structure
/theme
├─ /css
│  └─ /scss
│     ├─ /parts
│     │	 └─ _part.scss
│     ├─ _part.scss
│     └─ theme.scss
├─ /fonts
├─ /img
│  ├─ /svg-sprites
│  └─ /raw
│     ├─ image.jpg
│     ├─ image.png
│     └─ image.svg
├─ /js
│  └─ /src
│     ├─ /theme
│     │  ├─ _functions.js
│     │  └─ page.js
│     ├─ /vendor
│     │  └─ plugin.js
│     ├─ theme.js
│     └─ vendor.js
└─ gulpfile.js

*/


/* Settings
------------------------------------------------------------*/

// Scripts
var scripts2watch = 'js/src/**/*.js';
var scripts2build = 'js/src/*.js';

// Styles
var styles = 'css/scss/**/*.scss';

// Images
var images = 'img/raw/**/*.{png,jpg,svg}';

// SVG Sprites
var svgSprites = 'img/svg-sprites/*.svg';


/* Tasks
------------------------------------------------------------*/

var gulp         = require('gulp'),

	// SCSS
	sass         = require('gulp-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	minifycss    = require('gulp-clean-css'),
	
	// JavaScript
	minifyjs     = require('gulp-uglify'),
	include      = require('gulp-include'),
	
	// Images
	imagemin     = require('gulp-imagemin'),
	svgstore	 = require('gulp-svgstore'),
	
	// Tools
	newer        = require('gulp-newer'),
	sourcemaps   = require('gulp-sourcemaps'),
	rename       = require('gulp-rename'),
	notify       = require('gulp-notify'),
	plumber      = require('gulp-plumber');


// Styles
gulp.task('styles', function () {
	return gulp.src(styles)
		.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
		.pipe(sourcemaps.init())
		.pipe(sass({ outputStyle: 'expanded' }))
		.pipe(autoprefixer())
		.pipe(gulp.dest('css'))
		.pipe(rename({ suffix: '.min' }))
		.pipe(minifycss())
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('css'));
});

// Scripts
gulp.task('scripts', function() {  
	return gulp.src(scripts2build)
		.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
		.pipe(sourcemaps.init())
		.pipe(include())
		.pipe(gulp.dest('js'))
		.pipe(rename({ suffix: '.min' }))
		.pipe(minifyjs())
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('js'));
});

// Images
gulp.task('images', function() {
	return gulp.src(images)
		.pipe(newer('img'))
		.pipe(imagemin())
		.pipe(gulp.dest('img'));
});

// Rebuild all images inside /img/raw folder
gulp.task('rebuildimages', function() {
	return gulp.src(images)
		.pipe(imagemin())
		.pipe(gulp.dest('img'));
});

// SVG Sprites
// Usage: <svg class="icon"><use xlink:href="img/sprites.svg#symbol-id" /></svg>
gulp.task('svgsprites', function() {
	return gulp.src(svgSprites)
		.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
		.pipe(imagemin())
		.pipe(svgstore())
		.pipe(rename('sprites.svg'))
		.pipe(gulp.dest('img'));
});

// Watch
gulp.task('watch', function() {
	gulp.watch(styles, ['styles']);
	gulp.watch(scripts2watch, ['scripts']);
	gulp.watch(images, ['images']);
	gulp.watch(svgSprites, ['svgsprites']);
});