Introduce src/ and dist/ folders

Separate minifying/renaming of files to prod-only tasks

Add tasks for copying jQuery and fonts

Ref #1138, #1070, #1155

.gitignore

@@ -1,9 +1,6 @@
 # Include your project-specific ignores in this file
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
-node_modules
+assets/dist
-assets/vendor
-assets/css/main.css.map
-assets/css/*main*.css
-assets/js/*scripts*.js
-assets/js/vendor/modernizr.min.js
 assets/rev-manifest.json
+bower_components
+node_modules

assets/less/_bootstrap.less

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

assets/src/less/_bootstrap.less

@@ -0,0 +1,92 @@
+//
+// 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";

gulpfile.js

@@ -1,35 +1,27 @@
 /*global $:true*/
 var gulp = require('gulp');
 var $ = require('gulp-load-plugins')();
+var plugins = require('gulp-load-plugins')();
+
 var pngcrush = require('imagemin-pngcrush');
+
 var mainBowerFiles = require('main-bower-files');
 
+var pkg = require('./package.json');
+
 var paths = {
   scripts: [
-    'assets/js/**/*.js',
+    'assets/src/js/**/*'
-    '!assets/js/vendor/**/*',
-    '!assets/js/scripts*.js'
   ],
   jshint: [
     'gulpfile.js',
-    'assets/js/*.js',
+    'assets/src/js/**/*'
-    '!assets/js/scripts.js',
-    '!assets/js/scripts.min.js',
-    '!assets/js/vendor/**/*',
-    '!assets/**/*.min-*'
   ],
-  less: 'assets/less/main.less',
+  less: 'assets/src/less/main.less',
   bower: mainBowerFiles()
 };
 
-var destination = {
+gulp.task('less:dev', function() {
-  css: 'assets/css',
-  scripts: 'assets/js',
-  modernizr: 'assets/vendor/modernizr',
-  vendor: 'assets/js/vendor'
-};
-
-gulp.task('less', function() {
   return gulp.src(paths.less)
     .pipe($.plumber())
     .pipe($.sourcemaps.init())
@@ -38,14 +30,23 @@ gulp.task('less', function() {
       })
       .pipe($.autoprefixer('last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12'))
       .pipe($.rename('./main.css'))
+      .pipe(gulp.dest('assets/dist/css'))
     .pipe($.sourcemaps.write())
-    .pipe(gulp.dest(destination.css))
-    .pipe($.minifyCss())
-    .pipe($.rename('./main.min.css'))
-    .pipe(gulp.dest(destination.css))
     .pipe($.livereload({ auto: false }));
 });
 
+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(gulp.dest('assets/dist/css'))
+    .pipe($.minifyCss());
+});
+
 gulp.task('jshint', function() {
   return gulp.src(paths.jshint)
     .pipe($.jshint())
@@ -53,45 +54,53 @@ gulp.task('jshint', function() {
     .pipe($.jshint.reporter('fail'));
 });
 
-gulp.task('js', ['jshint'], function() {
+gulp.task('js:dev', ['jshint'], function() {
   return gulp.src(paths.bower.concat(paths.scripts))
-    .pipe($.filter(['**/*.js', '!jquery.js', '!modernizr.js']))
     .pipe($.concat('./scripts.js'))
-    .pipe(gulp.dest(destination.scripts))
+    .pipe(gulp.dest('assets/dist/js'))
-    .pipe($.uglify())
-    .pipe($.rename('./scripts.min.js'))
-    .pipe(gulp.dest(destination.scripts))
     .pipe($.livereload({ auto: false }));
 });
 
-gulp.task('modernizr', function() {
+gulp.task('js:build', ['jshint'], function() {
-  return gulp.src(
+  return gulp.src(paths.bower.concat(paths.scripts))
-    ['assets/js/scripts.min.js'],
+    .pipe($.concat('./scripts.min.js'))
-    ['assets/css/main.min.css']
-  )
-    .pipe($.modernizr())
-    .pipe(gulp.dest(destination.modernizr))
     .pipe($.uglify())
-    .pipe($.rename('./modernizr.min.js'))
+    .pipe(gulp.dest('assets/dist/js'));
-    .pipe(gulp.dest(destination.vendor));
 });
 
-gulp.task('images', function () {
+gulp.task('copy:fonts', function() {
-  return gulp.src('assets/img/**/*')
+  return gulp.src(['bower_components/bootstrap/fonts/*', 'assets/src/fonts/*'])
+    .pipe(gulp.dest('assets/dist/fonts'));
+});
+
+gulp.task('copy:jquery', function() {
+  return gulp.src(['bower_components/jquery/dist/jquery.min.js'])
+    .pipe($.rename('jquery-' + pkg.devDependencies.jquery + '.min.js'))
+    .pipe(gulp.dest('assets/dist/js'));
+});
+
+gulp.task('images', function() {
+  return gulp.src('assets/src/img/**/*')
     .pipe($.imagemin({
       progressive: true,
       interlaced: true,
       use: [pngcrush()]
     }))
-    .pipe(gulp.dest('assets/img'));
+    .pipe(gulp.dest('assets/dist/img'));
 });
 
-gulp.task('bust', function () {
+gulp.task('modernizr', function() {
-  $.cache.clearAll();
+  return gulp.src(
+    ['assets/dist/js/scripts.min.js'],
+    ['assets/dist/css/main.min.css']
+  )
+    .pipe($.modernizr('modernizr.min.js'))
+    .pipe($.uglify())
+    .pipe(gulp.dest('assets/dist/js'));
 });
 
 gulp.task('version', function() {
-  return gulp.src(['assets/css/main.min.css', 'assets/js/scripts.min.js'], { base: 'assets' })
+  return gulp.src(['assets/dist/css/main.min.css', 'assets/dist/js/scripts.min.js'], { base: 'assets' })
     .pipe($.rev())
     .pipe(gulp.dest('assets'))
     .pipe($.rev.manifest())
@@ -100,13 +109,13 @@ gulp.task('version', function() {
 
 gulp.task('watch', function() {
   $.livereload.listen();
-  gulp.watch('assets/less/**/*.less', ['less']);
+  gulp.watch('assets/src/less/**/*', ['less:dev']);
-  gulp.watch('assets/js/**/*.js', ['jshint', 'js']);
+  gulp.watch('assets/src/js/**/*', ['jshint', 'js:dev']);
   gulp.watch('**/*.php').on('change', function(file) {
     $.livereload.changed(file.path);
   });
 });
 
-gulp.task('default', ['less', 'jshint', 'js', 'modernizr']);
+gulp.task('default', ['less:dev', 'jshint', 'js:dev']);
 gulp.task('dev', ['default']);
-gulp.task('build', ['less', 'jshint', 'js', 'modernizr', 'version']);
+gulp.task('build', ['less:build', 'js:build', 'copy:fonts', 'copy:jquery', 'images', 'modernizr', 'version']);

lib/scripts.php

@@ -3,12 +3,12 @@
  * Scripts and stylesheets
  *
  * Enqueue stylesheets in the following order:
- * 1. /theme/assets/css/main.css
+ * 1. /theme/assets/dist/css/main.css
  *
  * Enqueue scripts in the following order:
  * 1. jquery-1.11.1.min.js via Google CDN
- * 2. /theme/assets/js/vendor/modernizr.min.js
+ * 2. /theme/assets/dist/js/modernizr.min.js
- * 3. /theme/assets/js/scripts.js
+ * 3. /theme/assets/dist/js/scripts.js
  *
  * Google Analytics is loaded after enqueued scripts if:
  * - An ID has been defined in config.php
@@ -21,18 +21,18 @@ function roots_scripts() {
    */
   if (WP_ENV === 'development') {
     $assets = array(
-      'css'       => '/assets/css/main.css',
+      'css'       => '/assets/dist/css/main.css',
-      'js'        => '/assets/js/scripts.js',
+      'js'        => '/assets/dist/js/scripts.js',
-      'modernizr' => '/assets/vendor/modernizr/modernizr.js',
+      'modernizr' => '/assets/dist/js/modernizr.min.js',
       'jquery'    => '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js'
     );
   } else {
     $get_assets = file_get_contents(get_template_directory() . '/assets/rev-manifest.json');
     $assets     = json_decode($get_assets, true);
     $assets     = array(
-      'css'       => '/assets/' . $assets[get_template_directory() . '/assets/css/main.min.css'],
+      'css'       => '/assets/' . $assets[get_template_directory() . '/assets/dist/css/main.min.css'],
-      'js'       => '/assets/' . $assets[get_template_directory() . '/assets/js/scripts.min.js'],
+      'js'        => '/assets/' . $assets[get_template_directory() . '/assets/dist/js/scripts.min.js'],
-      'modernizr' => '/assets/js/vendor/modernizr.min.js',
+      'modernizr' => '/assets/dist/js/modernizr.min.js',
       'jquery'    => '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'
     );
   }
@@ -65,7 +65,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/vendor/jquery/dist/jquery.min.js?1.11.1"><\/script>\')</script>' . "\n";
+    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/dist/js/jquery-1.11.1.min.js"><\/script>\')</script>' . "\n";
     $add_jquery_fallback = false;
   }
 

package.json

@@ -27,7 +27,6 @@
     "gulp": "^3.8.7",
     "gulp-autoprefixer": "^0.0.7",
     "gulp-concat": "^2.3.4",
-    "gulp-filter": "^0.5.0",
     "gulp-grunt": "^0.5.2",
     "gulp-imagemin": "^0.6.0",
     "gulp-jshint": "^1.8.4",
@@ -38,11 +37,13 @@
     "gulp-modernizr": "https://github.com/doctyper/gulp-modernizr/tarball/develop",
     "gulp-plumber": "^0.6.3",
     "gulp-rename": "^1.2.0",
-    "gulp-rev": "^1.1.0",
+    "gulp-rev": "^2.0.1",
     "gulp-sourcemaps": "^1.1.1",
     "gulp-uglify": "^0.3.1",
     "imagemin-pngcrush": "^1.0.0",
     "jshint-stylish": "^0.4.0",
+    "jquery": "1.11.1",
+    "lodash": "^2.4.1",
     "main-bower-files": "^1.0.1"
   }
 }