Merge pull request #1215 from austinpray/austinpray-gulp

Gulp manifest.json Asset Pipeline

.gitignore

@@ -1,5 +1,5 @@
 # Include your project-specific ignores in this file
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
-assets/dist
+dist
 bower_components
 node_modules

README.md

@@ -74,10 +74,9 @@ When completed, you'll be able to run the various Gulp commands provided from th
 
 ### Available Gulp commands
 
-* `gulp dev` — Compile LESS to CSS, concatenate and validate JS
+* `gulp` — Compile and optimize the files in your assets directory
 * `gulp watch` — Compile assets when file changes are made
-* `gulp build` — Create minified assets that are used on non-development environments
-* `gulp images` — Lossless compression of PNG, JPEG, GIF and SVG images
+* `gulp --tasks` - Lists all the available tasks and what they do
 
 ## Documentation
 

assets/manifest.json

@@ -0,0 +1,22 @@
+{
+  "dependencies": {
+    "theme": {
+      "scripts": [
+        "scripts/**/*",
+        "scripts/main.js"
+      ],
+      "styles": "styles/main.less",
+      "editorStyle": "styles/editor-style.less"
+    },
+    "vendor": {
+      "scripts": [],
+      "styles": []
+    }
+  },
+  "ignoreDependencies": {
+    "bower": [
+      "jquery",
+      "modernizr"
+    ]
+  }
+}

assets/src/less/_bootstrap.less

@@ -1,92 +0,0 @@
-//
-// Bootstrap
-//
-// Comment out any unused components
-// --------------------------------------------------
-
-// Variables
-@import "../../../bower_components/bootstrap/less/variables";
-
-// Mixins: Utilities
-@import "../../../bower_components/bootstrap/less/mixins/hide-text";
-@import "../../../bower_components/bootstrap/less/mixins/opacity";
-@import "../../../bower_components/bootstrap/less/mixins/image";
-@import "../../../bower_components/bootstrap/less/mixins/labels";
-@import "../../../bower_components/bootstrap/less/mixins/reset-filter";
-@import "../../../bower_components/bootstrap/less/mixins/resize";
-@import "../../../bower_components/bootstrap/less/mixins/responsive-visibility";
-@import "../../../bower_components/bootstrap/less/mixins/size";
-@import "../../../bower_components/bootstrap/less/mixins/tab-focus";
-@import "../../../bower_components/bootstrap/less/mixins/text-emphasis";
-@import "../../../bower_components/bootstrap/less/mixins/text-overflow";
-@import "../../../bower_components/bootstrap/less/mixins/vendor-prefixes";
-
-// Mixins: Components
-@import "../../../bower_components/bootstrap/less/mixins/alerts";
-@import "../../../bower_components/bootstrap/less/mixins/buttons";
-@import "../../../bower_components/bootstrap/less/mixins/panels";
-@import "../../../bower_components/bootstrap/less/mixins/pagination";
-@import "../../../bower_components/bootstrap/less/mixins/list-group";
-@import "../../../bower_components/bootstrap/less/mixins/nav-divider";
-@import "../../../bower_components/bootstrap/less/mixins/forms";
-@import "../../../bower_components/bootstrap/less/mixins/progress-bar";
-@import "../../../bower_components/bootstrap/less/mixins/table-row";
-
-// Mixins: Skins
-@import "../../../bower_components/bootstrap/less/mixins/background-variant";
-@import "../../../bower_components/bootstrap/less/mixins/border-radius";
-@import "../../../bower_components/bootstrap/less/mixins/gradients";
-
-// Mixins: Layout
-@import "../../../bower_components/bootstrap/less/mixins/clearfix";
-@import "../../../bower_components/bootstrap/less/mixins/center-block";
-@import "../../../bower_components/bootstrap/less/mixins/nav-vertical-align";
-@import "../../../bower_components/bootstrap/less/mixins/grid-framework";
-@import "../../../bower_components/bootstrap/less/mixins/grid";
-
-// Reset
-@import "../../../bower_components/bootstrap/less/normalize";
-@import "../../../bower_components/bootstrap/less/print";
-@import "../../../bower_components/bootstrap/less/glyphicons";
-
-// Core CSS
-@import "../../../bower_components/bootstrap/less/scaffolding";
-@import "../../../bower_components/bootstrap/less/type";
-@import "../../../bower_components/bootstrap/less/code";
-@import "../../../bower_components/bootstrap/less/grid";
-@import "../../../bower_components/bootstrap/less/tables";
-@import "../../../bower_components/bootstrap/less/forms";
-@import "../../../bower_components/bootstrap/less/buttons";
-
-// Components
-@import "../../../bower_components/bootstrap/less/component-animations";
-@import "../../../bower_components/bootstrap/less/dropdowns";
-@import "../../../bower_components/bootstrap/less/button-groups";
-@import "../../../bower_components/bootstrap/less/input-groups";
-@import "../../../bower_components/bootstrap/less/navs";
-@import "../../../bower_components/bootstrap/less/navbar";
-@import "../../../bower_components/bootstrap/less/breadcrumbs";
-@import "../../../bower_components/bootstrap/less/pagination";
-@import "../../../bower_components/bootstrap/less/pager";
-@import "../../../bower_components/bootstrap/less/labels";
-@import "../../../bower_components/bootstrap/less/badges";
-@import "../../../bower_components/bootstrap/less/jumbotron";
-@import "../../../bower_components/bootstrap/less/thumbnails";
-@import "../../../bower_components/bootstrap/less/alerts";
-@import "../../../bower_components/bootstrap/less/progress-bars";
-@import "../../../bower_components/bootstrap/less/media";
-@import "../../../bower_components/bootstrap/less/list-group";
-@import "../../../bower_components/bootstrap/less/panels";
-@import "../../../bower_components/bootstrap/less/responsive-embed";
-@import "../../../bower_components/bootstrap/less/wells";
-@import "../../../bower_components/bootstrap/less/close";
-
-// Components w/ JavaScript
-@import "../../../bower_components/bootstrap/less/modals";
-@import "../../../bower_components/bootstrap/less/tooltip";
-@import "../../../bower_components/bootstrap/less/popovers";
-@import "../../../bower_components/bootstrap/less/carousel";
-
-// Utility classes
-@import "../../../bower_components/bootstrap/less/utilities";
-@import "../../../bower_components/bootstrap/less/responsive-utilities";

assets/styles/main.less

@@ -1,5 +1,6 @@
-// Bootstrap
-@import "_bootstrap";
+// bower:less
+@import "../../bower_components/bootstrap/less/bootstrap.less";
+// endbower
 
 // Variable overrides and custom variables
 @import "_variables";

bower.json

@@ -20,6 +20,7 @@
   "overrides": {
     "bootstrap": {
       "main": [
+        "./less/bootstrap.less",
         "./js/transition.js",
         "./js/alert.js",
         "./js/button.js",

gulpfile.js

@@ -1,132 +1,122 @@
 /*global $:true*/
-var gulp = require('gulp');
+var $              = require('gulp-load-plugins')();
+var _              = require('lodash');
+var gulp           = require('gulp');
+var lazypipe       = require('lazypipe');
+var mainBowerFiles = require('main-bower-files');
+var obj            = require('object-path');
 
-var $ = require('gulp-load-plugins')();
+var manifest = require('asset-builder')('./assets/manifest.json');
 
-var paths = {
-  scripts: [
-    'assets/src/js/**/*'
-  ],
-  jshint: [
-    'bower.json',
-    'gulpfile.js',
-    'assets/src/js/**/*'
-  ],
-  less: 'assets/src/less/main.less',
-  editorStyle: 'assets/src/less/editor-style.less'
+var path = manifest.buildPaths;
+var globs = manifest.globs;
+
+var cssTasks = function(filename) {
+  return lazypipe()
+    .pipe($.plumber)
+    .pipe($.sourcemaps.init)
+      .pipe(function () {
+        return $.if('*.less', $.less().on('error', function(err) {
+          console.warn(err.message);
+        }));
+      })
+      .pipe(function () {
+        return $.if('*.scss', $.sass());
+      })
+      .pipe($.autoprefixer, 'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12')
+      .pipe($.concat, filename)
+    .pipe($.sourcemaps.write, '.')
+    .pipe(gulp.dest, path.dist + 'styles')();
 };
 
-gulp.task('less:dev', function() {
-  return gulp.src(paths.less)
-    .pipe($.plumber())
-    .pipe($.sourcemaps.init())
-      .pipe($.less()).on('error', function(err) {
-        console.warn(err.message);
-      })
-      .pipe($.autoprefixer('last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12'))
-    .pipe($.sourcemaps.write())
-    .pipe($.rename('./main.css'))
-    .pipe(gulp.dest('assets/dist/css'))
-    .pipe($.livereload({ auto: false }));
+gulp.task('styles', ['wiredep', 'styles:editorStyle'], function() {
+  return gulp.src(globs.styles)
+    .pipe(cssTasks('main.css'));
 });
 
-gulp.task('less:build', function() {
-  return gulp.src(paths.less)
-    .pipe($.plumber())
-      .pipe($.less()).on('error', function(err) {
-        console.warn(err.message);
-      })
-      .pipe($.autoprefixer('last 2 versions', 'ie 9', 'android 2.3', 'android 4', 'opera 12'))
-      .pipe($.rename('./main.min.css'))
-    .pipe($.minifyCss())
-    .pipe(gulp.dest('assets/dist/css'));
-});
-
-gulp.task('less:editorStyle', function() {
-  return gulp.src(paths.editorStyle)
-    .pipe($.plumber())
-    .pipe($.less()).on('error', function(err) {
-      console.warn(err.message);
-    })
-    .pipe($.autoprefixer('last 2 versions', 'ie 9', 'android 2.3', 'android 4', 'opera 12'))
-    .pipe($.rename('./editor-style.css'))
-    .pipe(gulp.dest('assets/dist/css'));
+gulp.task('styles:editorStyle', function() {
+  return gulp.src(globs.editorStyle)
+    .pipe(cssTasks('editor-style.css'));
 });
 
 gulp.task('jshint', function() {
-  return gulp.src(paths.jshint)
+  return gulp.src([
+    'bower.json', 'gulpfile.js'
+  ].concat(obj.get(manifest, 'dependencies.theme.scripts', [])))
     .pipe($.jshint())
     .pipe($.jshint.reporter('jshint-stylish'))
     .pipe($.jshint.reporter('fail'));
 });
 
-gulp.task('js:dev', ['jshint'], function() {
-  return gulp.src(require('main-bower-files')().concat(paths.scripts))
-    .pipe($.filter('**/*.js'))
-    .pipe($.concat('./scripts.js'))
-    .pipe(gulp.dest('assets/dist/js'))
-    .pipe($.livereload({ auto: false }));
+var jsTasks = function(filename) {
+  var fn = filename;
+  return lazypipe()
+    .pipe($.sourcemaps.init)
+    .pipe(function () {
+      return $.if(!!fn, $.concat(fn || 'all.js'));
+    })
+    .pipe($.uglify)
+    .pipe($.sourcemaps.write, '.')
+    .pipe(gulp.dest, path.dist + 'scripts')();
+};
+
+gulp.task('scripts', ['jshint', 'scripts:ignored'], function() {
+  return gulp.src(globs.scripts)
+    .pipe(jsTasks('app.js'));
 });
 
-gulp.task('js:build', ['jshint'], function() {
-  return gulp.src(require('main-bower-files')().concat(paths.scripts))
-    .pipe($.filter('**/*.js'))
-    .pipe($.concat('./scripts.min.js'))
-    .pipe($.uglify())
-    .pipe(gulp.dest('assets/dist/js'));
+gulp.task('scripts:ignored', function () {
+  return gulp.src(globs.scriptsIgnored)
+    .pipe(jsTasks());
 });
 
-gulp.task('copy:fonts', function() {
-  return gulp.src(require('main-bower-files')().concat('asset/src/fonts/**/*'))
-    .pipe($.filter('**/*.{eot,svg,ttf,woff}'))
-    .pipe(gulp.dest('assets/dist/fonts'));
-});
-
-gulp.task('copy:jquery', function() {
-  return gulp.src(['bower_components/jquery/dist/jquery.min.js'])
-    .pipe($.rename('jquery-1.11.1.min.js'))
-    .pipe(gulp.dest('assets/dist/js'));
-});
-
-gulp.task('copy:modernizr', function() {
-  return gulp.src(['bower_components/modernizr/modernizr.js'])
-    .pipe($.uglify())
-    .pipe($.rename('modernizr.min.js'))
-    .pipe(gulp.dest('assets/dist/js'));
+gulp.task('fonts', function() {
+  return gulp.src(globs.fonts)
+    .pipe($.flatten())
+    .pipe(gulp.dest(path.dist + 'fonts'));
 });
 
 gulp.task('images', function() {
-  return gulp.src('assets/src/img/**/*')
+  return gulp.src(globs.images)
     .pipe($.imagemin({
       progressive: true,
       interlaced: true
     }))
-    .pipe(gulp.dest('assets/dist/img'));
+    .pipe(gulp.dest(path.dist + 'images'));
 });
 
 gulp.task('version', function() {
-  return gulp.src(['assets/dist/css/main.min.css', 'assets/dist/js/scripts.min.js'], { base: 'assets/dist' })
-    .pipe(gulp.dest('assets/dist'))
+  return gulp.src([path.dist + '**/*.{js,css}'], { base: path.dist })
+    .pipe(gulp.dest(path.dist))
     .pipe($.rev())
-    .pipe(gulp.dest('assets/dist'))
+    .pipe(gulp.dest(path.dist))
     .pipe($.rev.manifest())
-    .pipe(gulp.dest('assets/dist'));
+    .pipe(gulp.dest(path.dist));
 });
 
-gulp.task('clean', function() {
-  return gulp.src(['assets/dist/css/main.min*', 'assets/dist/js/scripts.min*'], { read: false })
-    .pipe($.clean());
-});
+gulp.task('clean', require('del').bind(null, [path.dist]));
 
 gulp.task('watch', function() {
   $.livereload.listen();
-  gulp.watch(['assets/src/less/**/*', 'bower.json'], ['less:dev']);
-  gulp.watch(['assets/src/js/**/*', 'bower.json'], ['jshint', 'js:dev']);
+  gulp.watch([path.src + 'styles/**/*', 'bower.json'], ['styles']);
+  gulp.watch([path.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts']);
+  gulp.watch(['bower.json'], ['wiredep']);
   gulp.watch('**/*.php').on('change', function(file) {
     $.livereload.changed(file.path);
   });
 });
 
-gulp.task('default', ['less:dev', 'less:editorStyle', 'jshint', 'js:dev', 'copy:fonts', 'images']);
-gulp.task('dev', ['default']);
-gulp.task('build', ['clean', 'less:build', 'less:editorStyle', 'js:build', 'copy:fonts', 'copy:jquery', 'copy:modernizr', 'images', 'version']);
+gulp.task('build', ['styles', 'scripts', 'fonts', 'images'], function () {
+  gulp.start('version');
+});
+
+gulp.task('wiredep', function () {
+  var wiredep = require('wiredep').stream;
+  gulp.src(obj.get(manifest, 'dependencies.theme.styles'))
+    .pipe(wiredep())
+    .pipe(gulp.dest(manifest.buildPaths.src + 'styles/'));
+});
+
+gulp.task('default', ['clean'], function () {
+  gulp.start('build');
+});

lib/assets.php

@@ -3,23 +3,23 @@
  * Scripts and stylesheets
  *
  * Enqueue stylesheets in the following order:
- * 1. /theme/assets/dist/css/main.css
+ * 1. /theme/dist/styles/main.css
  *
  * Enqueue scripts in the following order:
- * 1. jquery-1.11.1.min.js via Google CDN
- * 2. /theme/assets/dist/js/modernizr.min.js
- * 3. /theme/assets/dist/js/scripts.js
+ * 1. jquery-1.11.1.js via Google CDN
+ * 2. /theme/dist/scripts/modernizr.js
+ * 3. /theme/dist/scripts/app.js
  *
  * Google Analytics is loaded after enqueued scripts if:
  * - An ID has been defined in config.php
  * - You're not logged in as an administrator
  */
-function roots_asset_path($filename_dev, $filename) {
+function roots_asset_path($filename) {
   if (WP_ENV === 'development') {
-    return get_template_directory_uri() . '/assets/dist/' . $filename_dev;
+    return get_template_directory_uri() . '/dist/' . $filename;
   }
 
-  $manifest_path = get_template_directory() . '/assets/dist/rev-manifest.json';
+  $manifest_path = get_template_directory() . '/dist/rev-manifest.json';
 
   if (file_exists($manifest_path)) {
     $manifest = json_decode(file_get_contents($manifest_path), true);
@@ -28,12 +28,12 @@ function roots_asset_path($filename_dev, $filename) {
   }
 
   if (array_key_exists($filename, $manifest)) {
-    return get_template_directory_uri() . '/assets/dist/' . $manifest[$filename];
+    return get_template_directory_uri() . '/dist/' . $manifest[$filename];
   }
 }
 
 function roots_assets() {
-  wp_enqueue_style('roots_css', roots_asset_path('css/main.css', 'css/main.min.css'), false, null);
+  wp_enqueue_style('roots_css', roots_asset_path('styles/main.css'), false, null);
 
   /**
    * jQuery is loaded using the same method from HTML5 Boilerplate:
@@ -43,11 +43,7 @@ function roots_assets() {
   if (!is_admin() && current_theme_supports('jquery-cdn')) {
     wp_deregister_script('jquery');
 
-    if (WP_ENV === 'development') {
-      wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js', array(), null, true);
-    } else {
-      wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), null, true);
-    }
+    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js', array(), null, true);
 
     add_filter('script_loader_src', 'roots_jquery_local_fallback', 10, 2);
   }
@@ -56,9 +52,9 @@ function roots_assets() {
     wp_enqueue_script('comment-reply');
   }
 
-  wp_enqueue_script('modernizr', roots_asset_path('../../bower_components/modernizr/modernizr.js', 'js/modernizr.min.js'), array(), null, true);
+  wp_enqueue_script(roots_asset_path('scripts/modernizr.js'), array(), null, true);
   wp_enqueue_script('jquery');
-  wp_enqueue_script('roots_js', roots_asset_path('js/scripts.js', 'js/scripts.min.js'), array(), null, true);
+  wp_enqueue_script('roots_js', roots_asset_path('scripts/app.js'), array(), null, true);
 }
 add_action('wp_enqueue_scripts', 'roots_assets', 100);
 
@@ -67,7 +63,7 @@ function roots_jquery_local_fallback($src, $handle = null) {
   static $add_jquery_fallback = false;
 
   if ($add_jquery_fallback) {
-    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/dist/js/jquery-1.11.1.min.js"><\/script>\')</script>' . "\n";
+    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/dist/scripts/jquery.js"><\/script>\')</script>' . "\n";
     $add_jquery_fallback = false;
   }
 

lib/init.php

@@ -28,7 +28,7 @@ function roots_setup() {
   add_theme_support('html5', array('caption', 'comment-form', 'comment-list'));
 
   // Tell the TinyMCE editor to use a custom stylesheet
-  add_editor_style('/assets/dist/css/editor-style.css');
+  add_editor_style('/dist/css/editor-style.css');
 }
 add_action('after_setup_theme', 'roots_setup');
 

package.json

@@ -16,35 +16,36 @@
       "url": "http://opensource.org/licenses/MIT"
     }
   ],
-  "scripts": {
-    "postinstall": "node node_modules/bower/bin/bower install && gulp dev"
-  },
+  "scripts": {},
   "engines": {
     "node": ">= 0.10.0"
   },
   "devDependencies": {
-    "bower": ">=1.3.9",
-    "gulp": "^3.8.7",
-    "gulp-autoprefixer": "^0.0.7",
-    "gulp-clean": "^0.3.1",
+    "asset-builder": "0.0.1",
+    "del": "^0.1.3",
+    "gulp": "^3.8.10",
+    "gulp-autoprefixer": "^2.0.0",
     "gulp-concat": "^2.3.4",
-    "gulp-filter": "^0.4.1",
-    "gulp-grunt": "^0.5.2",
-    "gulp-imagemin": "^0.6.0",
+    "gulp-flatten": "0.0.4",
+    "gulp-if": "^1.2.5",
+    "gulp-imagemin": "^2.0.0",
     "gulp-jshint": "^1.8.4",
     "gulp-less": "^1.3.3",
     "gulp-livereload": "^2.1.0",
-    "gulp-load-plugins": "^0.5.0",
-    "gulp-minify-css": "^0.3.7",
+    "gulp-load-plugins": "^0.7.1",
     "gulp-plumber": "^0.6.3",
     "gulp-rename": "^1.2.0",
     "gulp-rev": "^2.0.1",
+    "gulp-sass": "^1.1.0",
     "gulp-sourcemaps": "^1.1.1",
-    "gulp-uglify": "^0.3.1",
-    "imagemin-pngcrush": "^1.0.0",
-    "jshint-stylish": "^0.4.0",
-    "jquery": "1.11.1",
+    "gulp-uglify": "^1.0.1",
+    "imagemin-pngcrush": "^4.0.0",
+    "jshint-stylish": "^1.0.0",
+    "lazypipe": "^0.2.2",
     "lodash": "^2.4.1",
-    "main-bower-files": "^1.0.1"
+    "main-bower-files": "^2.4.0",
+    "object-path": "^0.8.0",
+    "traverse": "^0.6.6",
+    "wiredep": "^2.1.0"
   }
 }