Wordpress + Gulp.js setup

functions.php

<?php

/**
 * Load site scripts.
 *
 * @since  1.0.0
 *
 * @return void
 */
function wpgulp_enqueue_scripts() {
	// Loads Odin main stylesheet.
	wp_enqueue_style( 'wpgulp-style', get_stylesheet_uri(), array(), null, 'all' );

	// jQuery.
	wp_enqueue_script( 'jquery' );

	// Theme scripts.
	wp_enqueue_script( 'wpgulp-main-min', get_template_directory_uri() . '/assets/js/build/main.js', array(), null, true );
}

add_action( 'wp_enqueue_scripts', 'wpgulp_enqueue_scripts', 1 );

/**
 * Custom stylesheet URI.
 *
 * @since  1.0.0
 *
 * @param  string $uri Default URI.
 * @param  string $dir Stylesheet directory URI.
 *
 * @return string      New URI.
 */
function wpgulp_stylesheet_uri( $uri, $dir ) {
	return $dir . '/assets/css/style.css';
}

add_filter( 'stylesheet_uri', 'wpgulp_stylesheet_uri', 10, 2 );

gulpfile.js

/* jshint node:true */

// Include project requirements.
var gulp = require( 'gulp' ),
	jshint = require( 'gulp-jshint' ),
	uglify = require( 'gulp-uglify' ),
	sass = require( 'gulp-sass' ),
	imagemin = require( 'gulp-imagemin' );

// Sets assets folders.
var dirs = {
	js: '../assets/js',
	css: '../assets/css',
	sass: '../assets/sass',
	images: '../assets/images',
	fonts: '../assets/fonts'
};

gulp.task( 'scripts', function () {
	// Hint all JavaScript.
	gulp.src( dirs.js + '/client/*.js' )
		.pipe( jshint() )
		.pipe( jshint.reporter( 'default' ) );

	// Minify and copy all JavaScript.
	gulp.src( dirs.js + '/client/*.js' )
		.pipe( uglify() )
		.pipe( gulp.dest( dirs.js + '/build' ) );
});

gulp.task( 'sass', function () {
	// Compile all SCSS files.
	gulp.src( dirs.sass + '/*.scss' )
		.pipe( sass({
			outputStyle: 'compressed'
		}) )
		.pipe( gulp.dest( dirs.css ) );
});

gulp.task( 'optimize', function () {
	// Optimize all images.
	gulp.src( dirs.images + '/*.{png,jpg,gif}' )
		.pipe( imagemin({
			optimizationLevel: 7,
			progressive: true
		}) )
		.pipe( gulp.dest( dirs.images ) );
});

gulp.task( 'watch', function () {
	// Watch JavaScript changes.
	gulp.watch( dirs.js + '/client/*.js', function () {
		gulp.run( 'scripts' );
	});

	// Watch SCSS changes.
	gulp.watch( dirs.sass + '/*.scss', function () {
		gulp.run( 'sass' );
	});
});

gulp.task( 'default', function () {
	// Compile all assets.
	gulp.run( 'scripts', 'sass' );
});

install_gulp.sh

sudo npm install -g gulp

npm_install.sh

npm install

package.json

{
  "name": "wp-gulp",
  "description": "Example of using Gulp with WordPress",
  "version": "1.0.0",
  "title": "WP Gulp",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "~3.2.4",
    "gulp-jshint": "~1.3.4",
    "gulp-uglify": "~0.1.0",
    "gulp-sass": "~0.2.3",
    "gulp-imagemin": "~0.1.1"
  },
  "engines": {
    "node": ">=0.8.0",
    "npm": ">=1.1.0"
  }
}

tree

assets
├── css
│   └── style.css // CSS compilado
├── images
│   └── odin-logo.png
├── js
│   ├── build // Scripts compilados
│   │   └── main.js
│   └── client // Scripts para desenvolvimento
│       └── main.js
└── sass
    └── style.scss