Implement JSON file based asset pipeline

Adds manifest.json which contains all of the mappings for the assets
ref: https://github.com/roots/roots/pull/1138#issuecomment-62593715

Prune and update NPM deps

README.md

@@ -74,9 +74,8 @@ When completed, you'll be able to run the various Gulp commands provided from th
 
 ### Available Gulp commands
 
-* `gulp` — 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 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"
+    ]
+  }
+}

gulpfile.js

@@ -1,117 +1,184 @@
 /*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 traverse       = require('traverse');
+var util           = require('util');
 
-var build = {
+function getManifest(path) {
+  var m = require(path);
+  var defaults = {
+    buildPaths: {
+      appendSrc: ['theme'],
       src: 'assets/',
       dist: 'dist/'
-};
+    }
+  };
+  var err = function (msg) {
+    msg = msg || 'file seems to be malformed';
+    console.error('Manifest File Error: %s: %s', path, msg);
+    process.exit(1);
+  };
+  var required = ['dependencies', 'buildPaths'];
 
-var paths = {
+  if(_.isPlainObject(m)) {
-  scripts: [
+    m = _.defaults(m, defaults);
-    build.src + 'scripts/**/*'
-  ],
-  jshint: [
-    'bower.json',
-    'gulpfile.js',
-    build.src + 'scripts/**/*'
-  ],
-  styles: build.src + 'styles/main.less',
-  editorStyle: build.src + 'styles/editor-style.less'
-};
 
-gulp.task('styles', function() {
+    _.forEach(required, function (req) {
-  return gulp.src(paths.styles)
+      if(!obj.has(m, req)) {
-    .pipe($.plumber())
+        err('missing "'+req+'" property');
-    .pipe($.sourcemaps.init())
+      }
-      .pipe($.less()).on('error', function(err) {
+    });
+
+    traverse(m.dependencies).forEach(function (node) {
+      if(this.isLeaf && !_.isArray(node) && !_.isArray(this.parent.node)) {
+        this.update([node]);
+      }
+    });
+
+    if(m.buildPaths.appendSrc) {
+      _.forOwn(m.dependencies, function (dependency, name) {
+        if(m.buildPaths.appendSrc.indexOf(name) >= 0) {
+          traverse(m.dependencies[name]).forEach(function (node) {
+            if(this.isLeaf) {
+              this.update(m.buildPaths.src + node);
+            }
+          });
+        }
+      });
+    }
+
+    return m;
+  } else {
+    err();
+  }
+}
+
+var manifest = getManifest('./assets/manifest.json');
+
+var path = manifest.buildPaths;
+
+var bower = require('wiredep')({
+  exclude: obj.get(manifest, 'ignoreDependencies.bower')
+});
+
+var globs = (function buildGlobs() {
+  return {
+    scripts: (bower.js || [])
+      .concat(obj.get(manifest, 'dependencies.vendor.scripts', []))
+      .concat(obj.get(manifest, 'dependencies.theme.scripts', [])),
+    scriptsIgnored: _.reduce(obj.get(manifest, 'ignoreDependencies.bower', []), 
+      function (paths, depName) {
+        return paths.concat(obj.get(bower, 'packages.'+depName+'.main', []));
+      }, []),
+    styles: (bower.css || [])
+      .concat(obj.get(manifest, 'dependencies.vendor.styles', []))
+      .concat(obj.get(manifest, 'dependencies.theme.styles', [])),
+    editorStyle: obj.get(manifest, 'dependencies.theme.editorStyle', []),
+    fonts: mainBowerFiles({ filter: /\.(eot|svg|ttf|woff)$/i })
+      .concat(manifest.buildPaths.src + 'fonts/**/*.{eot,svg,ttf,woff}'),
+    images: path.src + 'images/**/*'
+  };
+})();
+
+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($.autoprefixer('last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12'))
+      .pipe(function () {
-    .pipe($.minifyCss())
+        return $.if('*.scss', $.sass());
-    .pipe($.sourcemaps.write())
+      })
-    .pipe($.rename('main.css'))
+      .pipe($.autoprefixer, 'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12')
-    .pipe(gulp.dest(build.dist + 'styles'));
+      .pipe($.concat, filename)
+    .pipe($.sourcemaps.write, '.')
+    .pipe(gulp.dest, path.dist + 'styles')();
+};
+
+gulp.task('styles', ['styles:editorStyle'], function() {
+  return gulp.src(globs.styles)
+    .pipe(cssTasks('main.css'));
 });
 
 gulp.task('styles:editorStyle', function() {
-  return gulp.src(paths.editorStyle)
+  return gulp.src(globs.editorStyle)
-    .pipe($.plumber())
+    .pipe(cssTasks('editor-style.css'));
-    .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(build.dist + 'styles'));
 });
 
 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('scripts', ['jshint'], function() {
+var jsTasks = function(filename) {
-  return gulp.src(require('main-bower-files')().concat(paths.scripts))
+  var fn = filename;
-    .pipe($.filter('**/*.js'))
+  return lazypipe()
-    .pipe($.concat('scripts.js'))
+    .pipe($.sourcemaps.init)
-    .pipe($.uglify())
+    .pipe(function () {
-    .pipe(gulp.dest(build.dist + 'scripts'));
+      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('copy:fonts', function() {
+gulp.task('scripts:ignored', function () {
-  return gulp.src(require('main-bower-files')().concat(build.src + 'fonts/**/*'))
+  return gulp.src(globs.scriptsIgnored)
-    .pipe($.filter('**/*.{eot,svg,ttf,woff}'))
+    .pipe(jsTasks());
-    .pipe(gulp.dest(build.dist + 'fonts'));
 });
 
-gulp.task('copy:jquery', function() {
+gulp.task('fonts', function() {
-  return gulp.src(['bower_components/jquery/dist/jquery.js'])
+  return gulp.src(globs.fonts)
-    .pipe($.rename('jquery.js'))
+    .pipe($.flatten())
-    .pipe(gulp.dest(build.dist + 'scripts'));
+    .pipe(gulp.dest(path.dist + 'fonts'));
-});
-
-gulp.task('copy:modernizr', function() {
-  return gulp.src(['bower_components/modernizr/modernizr.js'])
-    .pipe($.uglify())
-    .pipe($.rename('modernizr.js'))
-    .pipe(gulp.dest(build.dist + 'scripts'));
 });
 
 gulp.task('images', function() {
-  return gulp.src(build.src + 'src/images/**/*')
+  return gulp.src(globs.images)
     .pipe($.imagemin({
       progressive: true,
       interlaced: true
     }))
-    .pipe(gulp.dest(build.dist + 'images'));
+    .pipe(gulp.dest(path.dist + 'images'));
 });
 
 gulp.task('version', function() {
-  return gulp.src([build.dist + 'styles/main.css', build.dist + 'scripts/scripts.js'], { base: build.dist })
+  return gulp.src([path.dist + '**/*.{js,css}'], { base: path.dist })
-    .pipe(gulp.dest(build.dist))
+    .pipe(gulp.dest(path.dist))
     .pipe($.rev())
-    .pipe(gulp.dest(build.dist))
+    .pipe(gulp.dest(path.dist))
     .pipe($.rev.manifest())
-    .pipe(gulp.dest(build.dist));
+    .pipe(gulp.dest(path.dist));
 });
 
-gulp.task('clean', function() {
+gulp.task('clean', require('del').bind(null, [path.dist]));
-  return gulp.src(build.dist, { read: false })
-    .pipe($.clean());
-});
 
 gulp.task('watch', function() {
   $.livereload.listen();
-  gulp.watch([build.src + 'styles/**/*', 'bower.json'], ['styles']);
+  gulp.watch([path.src + 'styles/**/*', 'bower.json'], ['styles']);
-  gulp.watch([build.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts']);
+  gulp.watch([path.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts']);
   gulp.watch('**/*.php').on('change', function(file) {
     $.livereload.changed(file.path);
   });
 });
 
-gulp.task('build', ['styles', 'styles:editorStyle', 'scripts', 'copy:fonts', 'copy:jquery', 'copy:modernizr', 'images'], function () {
+gulp.task('build', ['styles', 'scripts', 'fonts', 'images'], function () {
   gulp.start('version');
 });
 

lib/assets.php

@@ -8,7 +8,7 @@
  * Enqueue scripts in the following order:
  * 1. jquery-1.11.1.js via Google CDN
  * 2. /theme/dist/scripts/modernizr.js
- * 3. /theme/dist/scripts/scripts.js
+ * 3. /theme/dist/scripts/app.js
  *
  * Google Analytics is loaded after enqueued scripts if:
  * - An ID has been defined in config.php
@@ -54,7 +54,7 @@ function roots_assets() {
 
   wp_enqueue_script(roots_asset_path('scripts/modernizr.js'), array(), null, true);
   wp_enqueue_script('jquery');
-  wp_enqueue_script('roots_js', roots_asset_path('scripts/scripts.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);
 

package.json

@@ -21,27 +21,30 @@
     "node": ">= 0.10.0"
   },
   "devDependencies": {
+    "del": "^0.1.3",
     "gulp": "^3.8.10",
-    "gulp-autoprefixer": "^0.0.7",
+    "gulp-autoprefixer": "^2.0.0",
-    "gulp-clean": "^0.3.1",
     "gulp-concat": "^2.3.4",
-    "gulp-filter": "^0.4.1",
+    "gulp-flatten": "0.0.4",
-    "gulp-grunt": "^0.5.2",
+    "gulp-if": "^1.2.5",
-    "gulp-imagemin": "^0.6.0",
+    "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-load-plugins": "^0.7.1",
-    "gulp-minify-css": "^0.3.7",
     "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",
+    "gulp-uglify": "^1.0.1",
-    "imagemin-pngcrush": "^1.0.0",
+    "imagemin-pngcrush": "^4.0.0",
-    "jquery": "1.11.1",
+    "jshint-stylish": "^1.0.0",
-    "jshint-stylish": "^0.4.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"
   }
 }