WordPress theme development Gulp workflow

gulpfile.js

/*

If you're using this file, you'll need to update
* Directories
* FTP details (59, 60, 61)
* Scripts paths (105, 106)
* + watch directories (135)

*/



// Directories
var dir = {
    src    : './src/',
    css    : './assets/css/',
    js     : './assets/js/',
    scss   : './assets/css/scss/',
    remote : 'public_html/wordpress/wp-content/themes/wordpress-theme', // Update path
};

// Notifications
var note = {
    deploy  : "Site deployed",
    css     : "SCSS compiled",
    vendor  : "all.min.js created",
    js      : "theme.min.js created",
    removed : "all.js removed",
}

// Dependancies
var gulp         = require('gulp'),
    gutil        = require('gulp-util'),
    ftp          = require('vinyl-ftp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps   = require('gulp-sourcemaps'),
    rename       = require('gulp-rename'),
    cssnano      = require('gulp-cssnano'),
    uglify       = require('gulp-uglify'),
    concat       = require('gulp-concat'),
    notify       = require('gulp-notify'),
    clean        = require('gulp-clean'),
    mediaqueries = require('gulp-group-css-media-queries');

// Prefixer 
var supportedBrowsers = [
    'last 2 versions',
    'safari >= 8',
    'ie >= 9',
    'ff >= 20',
    'ios 6',
    'android 4'
];

// FTP
gulp.task('deploy', function() {
    var conn = ftp.create( {
        host:     '11.22.333.44',
        user:     'user_name',
        password: 'Passw0rd',
        parallel: 3,
        log:      gutil.log,
        secure: false
    } );

    /* list all files you wish to ftp in the glob variable */
    var globs = [
        '**/*',
        '*',
        '!node_modules/**',
        '!.git/**',
        '!.gitignore',
        '!sftp-config.json',
        '!gulpfile.js' // if you wish to exclude directories, start the item with an !
    ];

    return gulp.src( globs, { base: '.', buffer: false } )
        .pipe( conn.newer( dir.remote ) ) // only upload newer files
        .pipe( conn.dest( dir.remote ) )
        .pipe(notify( note.deploy ));

});

// Styles
gulp.task('styles', function(){
  return gulp.src( dir.scss + 'style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({sourceComments: true})
        .on('error', function(err) {notify().write(err);}))
    .pipe(mediaqueries())
    .pipe(autoprefixer(supportedBrowsers))
    .pipe(gulp.dest('./'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(sourcemaps.write( dir.css + 'maps'))
    .pipe(gulp.dest('./'))
    .pipe(notify({ message: note.css }));
});


// Scripts
gulp.task('vendor', function() {
  return gulp.src([
      '!assets/js/all.js', // ignore
      'assets/js/vendor/*.js'
    ])
    .pipe(concat('all.js'))
    .pipe(gulp.dest( dir.js ))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest( dir.js ))
    .pipe(notify({ message: note.vendor }));
});

// Remove Scripts on minify.js
gulp.task('remove', ['vendor'], function () {
  return gulp.src( dir.js + 'all.js', {read: false})
    .pipe(clean())
    .pipe(notify({ message: note.removed }));
});

// Minify Default js
gulp.task('js', function() {
  return gulp.src( dir.js + 'theme.js')
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./'))
    .pipe(notify({ message: note.js }));
});

// Default Gulp Task / Watch
gulp.task('watch', function(){
  gulp.watch( dir.scss + '**/*.scss', ['styles']);
  gulp.watch( dir.js + 'vendor/*.js', ['remove']);
  gulp.watch( dir.js + 'theme.js', ['js']);
});

package.json

{
  "name": "make-theme",
  "version": "1.0.0",
  "description": "wptricks-starter-theme ======================",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/"
  },
  "homepage": "https://github.com/",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-group-css-media-queries": "^1.2.2",
    "gulp-notify": "^3.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.3",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "vinyl-ftp": "^0.6.0"
  }
}