diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..c13c5f6
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/.gitignore b/.gitignore
index e34150d..f3650d9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ node_modules
 .sass-cache
 
 *.codekit
+.idea
+build
diff --git a/components/style.scss b/components/picard.scss
similarity index 100%
rename from components/style.scss
rename to components/picard.scss
diff --git a/functions.php b/functions.php
index 53a8d2a..a9b699a 100644
--- a/functions.php
+++ b/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' );
 
diff --git a/gulp/handleErrors.js b/gulp/handleErrors.js
deleted file mode 100644
index 4b395b2..0000000
--- a/gulp/handleErrors.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Error Handler
-module.exports = function (gulp, $) {
-    return function () {
-			$.notify.onError({
-			title: "Compile Error",
-			message: "<%= error.message %>"
-		}).apply(this, arguments);
-
-		// Keep gulp from hanging on this task
-		this.emit('end');
-	}
-};
\ No newline at end of file
diff --git a/gulp/scripts.js b/gulp/scripts.js
deleted file mode 100644
index 3a7114c..0000000
--- a/gulp/scripts.js
+++ /dev/null
@@ -1,24 +0,0 @@
-module.exports = function (gulp, $, handleErrors) {
-	var
-		browserify = require( 'browserify' ),
-		buffer = require( 'vinyl-buffer' ),
-		reactify = require( 'reactify' ),
-		bundler = browserify( './components/picard.jsx' ),
-		source = require( 'vinyl-source-stream' );
-		bundler.transform( reactify );
-
-    return function () {
-
-		// bundler.on( 'update', bundle );
-
-		return bundler.bundle()
-			// .on( 'error', $.util.log.bind( $.util, 'Browserify Error' ) )
-			.pipe( source( 'picard.js' ) )
-				// .pipe( buffer() )
-				// .pipe( $.sourcemaps.init( { loadMaps: true } ) )
-				// .pipe( $.sourcemaps.write( './' ) )
-			.pipe( gulp.dest( './' ) );
-
-	}
-
-}
\ No newline at end of file
diff --git a/gulp/styles.js b/gulp/styles.js
deleted file mode 100644
index 3a14731..0000000
--- a/gulp/styles.js
+++ /dev/null
@@ -1,19 +0,0 @@
-module.exports = function (gulp, $, handleErrors) {
-    return function () {
-		gulp.src('./components/style.scss')
-		.pipe($.sourcemaps.init())
-		.pipe($.sass())
-		// send SASS errors to console
-		.on('error', handleErrors)
-		// add browser prefixes
-		.pipe($.autoprefixer({
-			browsers: [ '> 5%', 'last 2 versions' ]
-		}))
-		// minify css
-		.pipe($.minifyCss({
-			keepSpecialComments: 1
-		}))
-		.pipe($.sourcemaps.write())
-		.pipe( gulp.dest( './' ) );
-	}
-};
\ No newline at end of file
diff --git a/gulp/watch.js b/gulp/watch.js
deleted file mode 100644
index 0183c89..0000000
--- a/gulp/watch.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = function (gulp, $, handleErrors) {
-    return function () {
-		// Watch .scss files
-		gulp.watch('components/**/*.scss', ['styles']);
-
-		// Watch .jsx files
-		gulp.watch('components/**/*.jsx', ['scripts']);
-	}
-};
\ No newline at end of file
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
new file mode 100644
index 0000000..814b746
--- /dev/null
+++ b/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']);
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index f0e74a4..0000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// Stash requires in variables
-var
-    $ = require('gulp-load-plugins')(),
-	gulp = require( 'gulp' ),
-	handleErrors = require('./gulp/handleErrors.js')(gulp, $);
-
-// helper to get partials
-function getGulpPartial(task) {
-    return require('./gulp/' + task)(gulp, $, handleErrors);
-}
-
-// get tasks from partials
-gulp.task( 'styles', getGulpPartial('styles') );
-gulp.task( 'scripts', getGulpPartial('scripts') );
-gulp.task( 'watch', getGulpPartial('watch') );
-
-// Builder
-gulp.task( 'build', ['styles', 'scripts']);
-
-// Alias build to default
-gulp.task( 'default', ['watch'] );
\ No newline at end of file
diff --git a/package.json b/package.json
index d506e3e..088c018 100644
--- a/package.json
+++ b/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"
   }
 }