Update gulp and npm packages, support ES6

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.gitignore

@@ -9,3 +9,5 @@ node_modules
 .sass-cache
 
 *.codekit
+.idea
+build

functions.php

@@ -1,4 +1,11 @@
 <?php
+/**
+ * Setups up IS_LOCAL constant
+ */
+if( !defined('IS_LOCAL') ){
+	define( 'IS_LOCAL', false );
+}
+
 if ( ! function_exists( 'picard_setup' ) ) :
 /**
  * Sets up theme defaults and registers support for various WordPress features.
@@ -116,13 +123,18 @@ function picard_montserrat_font_url() {
 }
 
 function picard_scripts() {
-	wp_enqueue_style( 'picard-style', get_stylesheet_uri(), '20150405' );
+	/**
+	 * Don't use minified file if developing locally
+	 */
+	$file_name = 'picard' . ( IS_LOCAL === false ? '' : '.min' );
 
-	wp_register_script( 'picard-script', get_template_directory_uri() . '/picard.js', array(), '20150506', true );
+	wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4' );
 
-	wp_enqueue_script( 'picard-script' );
+	wp_enqueue_style( 'picard-style', get_template_directory_uri() . '/build/' . $file_name . '.css', '20160301' );
 
-	wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4' );
+	wp_register_script( 'picard-script', get_template_directory_uri() . '/build/' . $file_name . '.js', array(), '20160301', true );
+
+	wp_enqueue_script( 'picard-script' );
 }
 add_action( 'wp_enqueue_scripts', 'picard_scripts' );
 

gulpfile.babel.js

@@ -0,0 +1,152 @@
+'use strict';
+
+import gulp from 'gulp';
+import source from 'vinyl-source-stream';
+import browserify from 'browserify';
+import babelify from 'babelify';
+import watchify from 'watchify';
+import buffer from 'vinyl-buffer';
+import reactify from 'reactify';
+
+var $ = require('gulp-load-plugins')();
+
+const dirs = {
+    src: 'components',
+    dest: 'build'
+};
+
+const sassPaths = {
+    src: `${dirs.src}/picard.scss`,
+    dest: `${dirs.dest}/`
+};
+
+const JSpaths = {
+    src: `${dirs.src}/picard.jsx`,
+    dest: `${dirs.dest}/`
+};
+
+gulp.task('styles', () => {
+    $.util.log($.util.colors.green('Building ') + $.util.colors.yellow(`${sassPaths.src}...`));
+    return gulp.src(sassPaths.src)
+        // start sourcemap
+        .pipe($.sourcemaps.init())
+        // run sass
+        .pipe($.sass.sync({
+            outputStyle: 'nested'
+        }))
+        // log sass errors
+        .on('error', err => {
+            $.util.log($.util.colors.red("CSS Error:"), $.util.colors.yellow(
+                err.message.replace(__dirname, '.').replace(__dirname, '.')
+            ));
+        })
+        // add browser prefixes
+        .pipe($.autoprefixer({
+            browsers: [ '> 5%', 'last 2 versions' ]
+        }))
+        // save human readable file
+        .pipe(gulp.dest(sassPaths.dest))
+        // minify css
+        .pipe($.cssnano())
+        // rename to min
+        .pipe($.rename({
+            suffix: ".min"
+        }))
+        // write sourcemap
+        .pipe($.sourcemaps.write('./'))
+        // save minified file
+        .pipe(gulp.dest(sassPaths.dest));
+});
+
+function buildScript(file, watch) {
+    var props = {
+        entries: ['./' + file],
+        debug: true,
+        transform: [
+            babelify.configure({presets: ["es2015", "react"]}),
+            reactify
+        ]
+    };
+
+    // watchify() if watch requested, otherwise run browserify() once
+    var bundler = watch ? watchify(browserify(props)) : browserify(props);
+
+    if( !watch ){
+        $.util.log($.util.colors.green('Building ') + $.util.colors.yellow(`${file}...`));
+    }
+
+    function rebundle() {
+        // create an initial text stream from browserify
+        var stream = bundler.bundle();
+        return stream
+            // log errors
+            .on('error', err => {
+                $.util.log($.util.colors.red("JS Error:"), $.util.colors.yellow(
+                    err.message.replace(__dirname, '.').replace(__dirname, '.')
+                ));
+            })
+            /**
+             * stream is a text stream but gulp uses
+             * vinyl streams so we must convert the
+             * text stream to a vinyl stream to use
+             * any gulp elements
+             */
+            .pipe(source(file))
+            // strip any directories in the file path
+            .pipe($.rename({
+                dirname: '/',
+                extname: ".js"
+            }))
+            // output a human readable file
+            .pipe(gulp.dest(JSpaths.dest))
+            /**
+             * we have a streaming vinyl object but uglify and
+             * sourcemaps need a buffered vinyl file objects so
+             * we must change the stream again by buffering it
+             */
+            .pipe(buffer())
+            // start source maps
+            .pipe($.sourcemaps.init({loadMaps: true}))
+            // minify the file
+            .pipe($.uglify({
+                preserveComments: 'some',
+                mangle: false
+            }))
+            // rename to .min
+            .pipe($.rename({
+                suffix: ".min"
+            }))
+            // save source map
+            .pipe($.sourcemaps.write('./'))
+            // save the minified file
+            .pipe(gulp.dest(JSpaths.dest));
+    }
+
+    // listen for an update and run rebundle
+    bundler.on('update', function () {
+        rebundle();
+        $.util.log($.util.colors.green('Rebuilding ') + $.util.colors.yellow(`${file}...`));
+    });
+
+    // run it once the first time buildScript is called
+    return rebundle();
+}
+
+// buildScript will run once because watch is set to false
+gulp.task('scripts', () => buildScript(JSpaths.src, false) );
+
+// Build Task
+gulp.task('build', [
+    'scripts',
+    'styles'
+]);
+
+gulp.task('watch', ['assets'], () => {
+    // Watch Sass files and run styles task on change
+    gulp.watch([sassPaths.src], ['styles']);
+
+    return buildScript(JSpaths.src, true);
+});
+
+// Default task is to build assets
+gulp.task('default', ['build']);

package.json

@@ -2,7 +2,7 @@
   "name": "picard-r",
   "version": "0.0.0",
   "description": "The next generation WordPress theme boilerplate",
-  "main": "index.js",
+  "main": "gulpfile.babel.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -17,23 +17,27 @@
   },
   "homepage": "https://github.com/Automattic/Picard",
   "devDependencies": {
-    "browserify": "~7.0.3",
-    "gulp": "~3.8.10",
-    "gulp-autoprefixer": "^2.0.0",
-    "gulp-load-plugins": "~0.9.0",
-    "gulp-minify-css": "~1.0.0",
-    "gulp-notify": "^2.2.0",
-    "gulp-sass": "~1.3.3",
-    "gulp-sourcemaps": "~1.2.8",
-    "gulp-uglify": "~1.3.0",
-    "gulp-util": "~3.0.1",
-    "gulp-watch": "^4.1.0",
+    "babel-core": "^6.5.2",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-cssnano": "^2.1.1",
+    "gulp-load-plugins": "^1.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.2.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.3",
+    "gulp-util": "^3.0.7",
     "page": "~1.5.0",
-    "react": "~0.12.2",
-    "reactify": "~0.17.1",
+    "react": "~0.14.7",
+    "reactify": "~1.1.1",
     "superagent": "^1.2.0",
-    "vinyl-buffer": "~1.0.0",
-    "vinyl-source-stream": "~1.0.0",
-    "watchify": "~2.2.1"
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.7.0"
   }
 }