diff --git a/.gitignore b/.gitignore index 34cb1dd..9eddf7e 100644 --- a/.gitignore +++ b/.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 diff --git a/README.md b/README.md index 93eafff..469a1bd 100644 --- a/README.md +++ b/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 diff --git a/assets/src/fonts/.gitkeep b/assets/fonts/.gitkeep similarity index 100% rename from assets/src/fonts/.gitkeep rename to assets/fonts/.gitkeep diff --git a/assets/src/img/.gitkeep b/assets/images/.gitkeep similarity index 100% rename from assets/src/img/.gitkeep rename to assets/images/.gitkeep diff --git a/assets/manifest.json b/assets/manifest.json new file mode 100644 index 0000000..26ed346 --- /dev/null +++ b/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" + ] + } +} diff --git a/assets/src/js/main.js b/assets/scripts/main.js similarity index 100% rename from assets/src/js/main.js rename to assets/scripts/main.js diff --git a/assets/src/less/_bootstrap.less b/assets/src/less/_bootstrap.less deleted file mode 100644 index 6825f08..0000000 --- a/assets/src/less/_bootstrap.less +++ /dev/null @@ -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"; diff --git a/assets/src/less/_global.less b/assets/styles/_global.less similarity index 100% rename from assets/src/less/_global.less rename to assets/styles/_global.less diff --git a/assets/src/less/_variables.less b/assets/styles/_variables.less similarity index 100% rename from assets/src/less/_variables.less rename to assets/styles/_variables.less diff --git a/assets/src/less/components/_buttons.less b/assets/styles/components/_buttons.less similarity index 100% rename from assets/src/less/components/_buttons.less rename to assets/styles/components/_buttons.less diff --git a/assets/src/less/components/_forms.less b/assets/styles/components/_forms.less similarity index 100% rename from assets/src/less/components/_forms.less rename to assets/styles/components/_forms.less diff --git a/assets/src/less/components/_media.less b/assets/styles/components/_media.less similarity index 100% rename from assets/src/less/components/_media.less rename to assets/styles/components/_media.less diff --git a/assets/src/less/components/_wp-classes.less b/assets/styles/components/_wp-classes.less similarity index 100% rename from assets/src/less/components/_wp-classes.less rename to assets/styles/components/_wp-classes.less diff --git a/assets/src/less/editor-style.less b/assets/styles/editor-style.less similarity index 100% rename from assets/src/less/editor-style.less rename to assets/styles/editor-style.less diff --git a/assets/src/less/layouts/_footer.less b/assets/styles/layouts/_footer.less similarity index 100% rename from assets/src/less/layouts/_footer.less rename to assets/styles/layouts/_footer.less diff --git a/assets/src/less/layouts/_general.less b/assets/styles/layouts/_general.less similarity index 100% rename from assets/src/less/layouts/_general.less rename to assets/styles/layouts/_general.less diff --git a/assets/src/less/layouts/_header.less b/assets/styles/layouts/_header.less similarity index 100% rename from assets/src/less/layouts/_header.less rename to assets/styles/layouts/_header.less diff --git a/assets/src/less/layouts/_pages.less b/assets/styles/layouts/_pages.less similarity index 100% rename from assets/src/less/layouts/_pages.less rename to assets/styles/layouts/_pages.less diff --git a/assets/src/less/layouts/_posts.less b/assets/styles/layouts/_posts.less similarity index 100% rename from assets/src/less/layouts/_posts.less rename to assets/styles/layouts/_posts.less diff --git a/assets/src/less/layouts/_sidebar.less b/assets/styles/layouts/_sidebar.less similarity index 100% rename from assets/src/less/layouts/_sidebar.less rename to assets/styles/layouts/_sidebar.less diff --git a/assets/src/less/layouts/pages/_home.less b/assets/styles/layouts/pages/_home.less similarity index 100% rename from assets/src/less/layouts/pages/_home.less rename to assets/styles/layouts/pages/_home.less diff --git a/assets/src/less/main.less b/assets/styles/main.less similarity index 89% rename from assets/src/less/main.less rename to assets/styles/main.less index aec9850..49f61a5 100644 --- a/assets/src/less/main.less +++ b/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"; diff --git a/bower.json b/bower.json index 3c6c50c..1d2d767 100644 --- a/bower.json +++ b/bower.json @@ -20,6 +20,7 @@ "overrides": { "bootstrap": { "main": [ + "./less/bootstrap.less", "./js/transition.js", "./js/alert.js", "./js/button.js", diff --git a/gulpfile.js b/gulpfile.js index 6592574..97f0f36 100644 --- a/gulpfile.js +++ b/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'); +}); diff --git a/lib/assets.php b/lib/assets.php index 25cb8b2..a670be2 100644 --- a/lib/assets.php +++ b/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 '' . "\n"; + echo '' . "\n"; $add_jquery_fallback = false; } diff --git a/lib/init.php b/lib/init.php index c836824..e9f6f28 100644 --- a/lib/init.php +++ b/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'); diff --git a/package.json b/package.json index d4f9e78..6e6884e 100644 --- a/package.json +++ b/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" } }