Gulp: Wordpress Theme

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'),
    prefix = require('gulp-autoprefixer'),
    ftp = require('gulp-ftp'),
    lr = require('tiny-lr'),
    livereload = require('gulp-livereload'),
    server = lr(),
    watch = require('gulp-watch');

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

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'))
        .pipe(livereload(server));;
});

gulp.task('sass', function() {
    // Compile all SCSS files.
    gulp.src(dirs.sass + '/*.scss')
        .pipe(sass({
            outputStyle: 'nested',
            includePaths : ['assets/scss'],
            errLogToConsole: true,
            sourceComments: 'normal',
            onSuccess: function(css){
                console.log(css)
            },
            onError: function(error) {
                console.log(error);
            },
        }))
        .pipe(prefix("last 1 version", "> 1%", "ie 8", "Android 4", "iOS 6"))
        .pipe(gulp.dest(dirs.css))
        .pipe(livereload(server));
});

gulp.task('php', function(){
    gulp.src(dirs.php)
        .pipe(livereload(server));
});

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));
});

// Deploy to ftp, except scss, unminified js, node_modules
gulp.task('deploy', function(){
    gulp.src(['*', '**/**',  '!assets/scss/**', '!assets/js/client/**', '!node_modules/**', '!gulpfile.js', '!*.sublime-project', '!*.sublime-workspace', '!package.json', '!.gitignore'])
        .pipe(ftp({
            host: 'your-host.tld',
            user: 'username',
            pass: 'password',
            remotePath: '/path/to/your/themefolder'
        }));
});

gulp.task('watch', function() {
    // init livereloadserver
    server.listen(35729, function (err) {
        if (err) return console.log(err);

        gulp.watch(dirs.php, function() {
            gulp.run('php');
        });

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

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

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

instructions.md

1. Copy in theme folder
2. npm install

• gulp - initial building
• gulp watch - filewatcher and livereload
• gulp deploy - FTP Deploying - enter your credentials in the gulpfile

Chrome Extension is recommended for live-reload.

Tested with MAMP.

package.json

{
  "name": "gulp-for-wp",
  "description": "Gulpfile for Wordpress Theme Developpment",
  "version": "1.0.0",
  "author": "Florenz Heldermann <florenz.heldermann@gmail.com>",
  "title": "WP Gulp Theming",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "~3.4.0",
    "gulp-jshint": "~1.3.4",
    "gulp-uglify": "~0.1.0",
    "gulp-sass": "~0.2.3",
    "gulp-imagemin": "~0.1.1",
    "gulp-watch": "~0.4.2",
    "gulp-livereload": "~0.2.0",
    "tiny-lr": "0.0.5",
    "gulp-ftp": "~0.1.1",
    "gulp-autoprefixer": "0.0.4"
  },
  "license": "MIT",
  "engines": {
    "node": ">=0.8.0",
    "npm": ">=1.1.0"
  }
}

the-filestructure.md

-THEME FOLDER

--php-files

--ASSETS

---CSS

---FONTS

---IMG

---SCSS