Gulp WP setup

Readme.md

Gulp WP setup

Includes a Gulp task that will watch the JavaScript and SCSS files and automatically build (compile, concat, minify, etc) them when they change. To set this up, perform the following steps:

• Install Node.js and NPM
• place package.json and gulpfile.js in your WP theme directory (eg. wp-content/themes/my-theme)
• Navigate in your terminal to your theme directory
• Install dependencies: npm install
• Install the Gulp CLI: npm install -g gulp-cli
• Run the Gulp watch task: gulp

Note: the generated style.css and js/application.js files in the theme should never be updated manually. They are generated from the individual SCSS and JS/Coffeescript files, respectively. The SCSS source lives in styles; the JS, in js/source.

gulpfile.js

// gulpfile.js -- place this in the theme dir
// Usage: from command line, run `gulp` to watch and auto-compile SCSS and coffeescript
// To minify files, run  `gulp build --env production`

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var coffee = require("gulp-coffee");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");

// ... variables
var autoprefixerOptions = {
  browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

var input = './styles/style.scss';
var output = './';

var isProduction = gulp.env.env === 'prod' || gulp.env.env === 'production';
var uglifying = isProduction;

var sassOptions = {
  errLogToConsole: true,
  outputStyle: isProduction ? 'compressed' : 'expanded',
};

// compiles scss file: in styles/style.scss to ./style.css
gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output));
});

// list all JS/coffee files here
var jsFiles = [
  'js/source/my-js-file.js',
  'js/source/my-coffee-file.coffee'
];

// compiles js files (listed above) to js/application.js
gulp.task('js', function () {
    gulp.src(jsFiles)
    .pipe(gulpif('**/*.coffee', coffee()))
    .pipe(concat('application.js')) // concat files
    .pipe( gulpif(uglifying, uglify()) )
    .pipe(gulp.dest('js/'));
});

gulp.task('watch', function() {
  gulp.watch('./styles/**/*.scss', ['sass']);
  gulp.watch('./js/source/**/*', ['js']);
});

gulp.task('build', ['sass', 'js']);
gulp.task('default', ['sass', 'js', 'watch']);

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "Gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-coffee": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-if": "^2.0.0",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.2",
    "gulp-util": "^3.0.7",
    "node-bourbon": "^4.2.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "shanson",
  "license": "ISC",
  "homepage": ""
}