5.5.0 Release

- Optimized Gulpfile
- Sourcemaps

.gitignore

@@ -37,4 +37,7 @@ dwsync.xml
 .CVS
 intermediate
 .idea
-cache
+cache
+
+# Sourcemaps
+assets/js/sourcemaps/*

assets/css/src/_global.less

@@ -1,6 +0,0 @@
-html {
-	box-sizing: border-box;
-}
-*, *:before, *:after {
-	box-sizing: inherit;
-}

assets/css/src/app.less

@@ -55,6 +55,7 @@
 
 // Project overrides for UIkit components
 @import "uikit/variables.less";
+@import "uikit/base.less";
 @import "uikit/comment.less";
 @import "uikit/icon.less";
 @import "uikit/navbar.less";

assets/css/src/uikit/base.less

@@ -0,0 +1,7 @@
+.hook-base-body() {
+	box-sizing: border-box;
+
+	*, *:before, *:after {
+		box-sizing: inherit;
+	}
+}

bower.json

@@ -1,6 +1,6 @@
 {
-  "name": "basey",
-  "version": "5.4.0",
+  "name": "basey-theme",
+  "version": "5.5.0",
   "private": "true",
   "dependencies": {
     "uikit": "2.10.*",

gulpfile.js

@@ -1,39 +1,50 @@
 // Load plugins
 var gulp         = require("gulp"),
-    Combine      = require("stream-combiner"),
-    jshint       = require("gulp-jshint"),
+    imagemin     = require("gulp-imagemin"),
     csso         = require("gulp-csso"),
     less         = require("gulp-less"),
     autoprefixer = require("gulp-autoprefixer"),
     uglify       = require("gulp-uglify"),
     notify       = require("gulp-notify"),
-    newer        = require("gulp-newer"),
-    size         = require("gulp-size"),
+    jshint       = require("gulp-jshint"),
+    changed      = require("gulp-changed"),
     concat       = require("gulp-concat"),
-    rename       = require("gulp-rename"),
     filesize     = require("gulp-size"),
-    livereload   = require("gulp-livereload"),
     duration     = require("gulp-duration"),
     pixrem       = require("gulp-pixrem"),
-    sourcemaps   = require('gulp-sourcemaps');
-
-var paths =  {
-  "scripts": {
-    "src": "assets/js/src/**/*.js",
-    "build": "assets/js/build/",
-    "vendor": "!assets/js/src/vendor/**/*.js"
-  },
-  "styles": {
-    "src": "assets/css/src/**/*.less",
-    "build": "assets/css/build/"
-  },
-  "media": {
-    "src": "assets/media/"
-  },
-  "fonts": {
-    "build": "assets/fonts/"
-  }
-};
+    sourcemaps   = require("gulp-sourcemaps"),
+    browserSync  = require("browser-sync"),
+    plumber      = require("gulp-plumber"),
+    merge        = require("merge-stream"),
+    filter       = require("gulp-filter");
+
+var reload = browserSync.reload,
+    paths =  {
+      "scripts": {
+        "src": "assets/js/src/**/*.js",
+        "build": "assets/js/build/",
+        "vendor": "!assets/js/src/vendor/**/*.js"
+      },
+      "styles": {
+        "src": "assets/css/src/**/*.less",
+        "build": "assets/css/build/"
+      },
+      "media": {
+        "src": "assets/media/src/*",
+        "build": "assets/media/build/"
+      },
+      "fonts": {
+        "build": "assets/fonts/"
+      }
+    };
+
+// BrowserSync
+gulp.task("reload", function() {
+  browserSync({
+    proxy: "wordpress.dev",
+    xip: true
+  });
+});
 
 // JS Hint
 gulp.task("jshint", function() {
@@ -57,20 +68,22 @@ gulp.task("jshint", function() {
 // Copy
 gulp.task("copy", function() {
   // UIkit fonts
-  gulp.src("bower_components/uikit/dist/fonts/*")
+  return gulp.src("bower_components/uikit/dist/fonts/*")
+    .pipe(changed(paths.fonts.build))
     .pipe(gulp.dest(paths.fonts.build));
 });
 
 // Scripts
 gulp.task("scripts", function() {
 
   // IE
-  gulp.src([
+  var ie = gulp.src([
       "bower_components/selectivizr/selectivizr.js",
       "bower_components/respond/dest/respond.min.js",
       "assets/js/src/vendor/ecmascript-polyfill.js",
       "assets/js/src/vendor/forEach-polyfill.js",
     ])
+    .pipe(changed(paths.scripts.build))
     .pipe(concat("ie.min.js"))
     .pipe(uglify())
     .pipe(filesize({
@@ -80,7 +93,7 @@ gulp.task("scripts", function() {
     .pipe(notify({ message: "IE scripts task complete" }));
 
   // Main
-  gulp.src([
+  var main = gulp.src([
       // UI Kit
       "bower_components/uikit/src/js/core.js",
       "bower_components/uikit/src/js/component.js",
@@ -124,58 +137,68 @@ gulp.task("scripts", function() {
       // Project
       "assets/js/src/_init.js"
     ])
+    .pipe(changed(paths.scripts.build))
     .pipe(sourcemaps.init())
       .pipe(concat("scripts.min.js"))
       .pipe(uglify())
-    .pipe(sourcemaps.write("../maps"))
+    .pipe(sourcemaps.write("../sourcemaps"))
+    .pipe(filter('**/*.js')) // Filter only JS files for filesize/dest
     .pipe(filesize({
       title: "Main Scripts:"
     }))
     .pipe(gulp.dest(paths.scripts.build))
     .pipe(duration("building main JS files"))
     .pipe(notify({ message: "Main scripts task complete" }));
+
+    return merge(ie, main);
 });
 
 // Styles
 gulp.task("styles", function() {
-  var combined = Combine(
-      gulp.src("assets/css/src/app.less"),
-      less(),
-      autoprefixer("last 2 version", "ie 9"),
-      csso(),
-      pixrem("14px", {
+  return gulp.src("assets/css/src/app.less")
+    .pipe(changed(paths.styles.build))
+    .pipe(plumber())
+      .pipe(less())
+      .pipe(autoprefixer({
+        browsers: ["last 2 versions", "ie 9"]
+      }))
+      .pipe(csso())
+      .pipe(pixrem("14px", {
         replace: true
-      }),
-      filesize({
-        title: "Styles:"
-      }),
-      gulp.dest(paths.styles.build),
-      duration("building styles"),
-      notify({ message: "Styles task complete" })
-    );
-
-    combined.on("error", function(err) {
-      console.warn(err.message);
-    });
-
-    return combined;
+      }))
+    .pipe(plumber.stop())
+    .pipe(filesize({
+      title: "Styles:"
+    }))
+    .pipe(gulp.dest(paths.styles.build))
+    .pipe(duration("building styles"))
+    .pipe(notify({ message: "Styles task complete" }))
+    .pipe(reload({
+      stream:true
+    }));
+});
+
+// Media
+gulp.task("media", function() {
+
+  return gulp.src(paths.media.src)
+    .pipe(changed(paths.media.build))
+    .pipe(imagemin())
+    .pipe(filesize({
+      title: "Media File:"
+    }))
+    .pipe(gulp.dest(paths.media.build))
+    .pipe(duration("compressing media"))
+    .pipe(notify({ message: "Media task complete" }));
 });
 
 // Default task
-gulp.task("default", ["copy", "styles", "jshint", "scripts"]);
+gulp.task("default", ["copy", "styles", "jshint", "scripts", "media", "watch"]);
 
 // Watch
-gulp.task("watch", function() {
-
+gulp.task("watch", ["reload"], function () {
+  gulp.watch(paths.scripts.src, ["jshint", "scripts", browserSync.reload]);
   gulp.watch(paths.styles.src, ["styles"]);
-  gulp.watch(paths.scripts.src, ["jshint", "scripts"]);
-
-  // Create LiveReload server
-  var server = livereload();
-
-  // Watch files in patterns below, reload on change
-  gulp.watch([paths.styles.build, paths.scripts.build, "*.php"]).on("change", function(file) {
-    server.changed(file.path);
-  });
-
+  gulp.watch(paths.media.src, ["media"]);
+  gulp.watch("*.php", ["", browserSync.reload]);
 });

package.json

@@ -1,21 +1,24 @@
 {
   "devDependencies": {
+    "browser-sync": "^1.5.2",
     "gulp": "^3.8.8",
     "gulp-autoprefixer": "1.0.1",
+    "gulp-changed": "^1.0.0",
     "gulp-concat": "^2.4.1",
     "gulp-csso": "^0.2.9",
     "gulp-duration": "0.0.0",
+    "gulp-filter": "^1.0.2",
+    "gulp-imagemin": "^1.0.1",
     "gulp-jshint": "^1.8.5",
     "gulp-less": "^1.3.6",
-    "gulp-livereload": "^2.1.1",
-    "gulp-newer": "^0.3.0",
     "gulp-notify": "^1.8.0",
     "gulp-pixrem": "^0.1.1",
+    "gulp-plumber": "^0.6.6",
     "gulp-rename": "^1.2.0",
     "gulp-size": "^1.1.0",
     "gulp-sourcemaps": "^1.2.2",
     "gulp-uglify": "^1.0.1",
     "jshint-stylish": "^1.0.0",
-    "stream-combiner": "^0.2.1"
+    "merge-stream": "^0.1.6"
   }
 }

readme.md

@@ -10,14 +10,14 @@ Extremely flexible, easy to customize and adheres to WordPress coding standards
     * [NodeJS](http://nodejs.org)
     * [Bower](http://bower.io)
     * [Gulp](http://gulpjs.com)
-* In your terminal, navigate to your site's directory and run the following:
+* In your terminal, navigate to your theme's directory and run the following:
     * `bower install`
     	* Installs necessary frontend assets
     * `npm install`
     	* Installs Gulp and Gulp plugins for compiling assets
     * `gulp`
-   		* Builds initial styles
-    * `gulp watch`
-    	* Watches the theme folder for changes
+   		* Builds initial project and watches for changes
+
+This project uses [BrowserSync](http://www.browsersync.io/) to automatically watch, compile, reload, etc. Change the proxy variable in the gulpfile to match your environment before starting.
 
 Enjoy!

style.css

@@ -2,7 +2,7 @@
 Theme Name:      Basey
 Theme URI:       http://zslabs.com
 Description:     Base theme for development
-Version:         5.4.1
+Version:         5.5.0
 Author:          Zach Schnackel
 Author URI:      http://zslabs.com
 */