From 3a4ae77b1e1c10e7678ba4bc8889fc4099cbfe05 Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Sat, 22 Nov 2014 19:28:38 -0600 Subject: [PATCH 1/5] Reorganizes asset file structure Separates assets into - Source assets: `assets` - Compiled assets: `dist` Edits assets.php to reflect changes Removes '.min' from filenames Fixes: - removes 'clean' from build step. --- .gitignore | 2 +- assets/{src => }/fonts/.gitkeep | 0 assets/{src/img => images}/.gitkeep | 0 assets/{src/js => scripts}/main.js | 0 assets/src/less/_bootstrap.less | 92 ------------------- assets/styles/_bootstrap.less | 92 +++++++++++++++++++ assets/{src/less => styles}/_global.less | 0 assets/{src/less => styles}/_variables.less | 0 .../less => styles}/components/_buttons.less | 0 .../less => styles}/components/_forms.less | 0 .../less => styles}/components/_media.less | 0 .../components/_wp-classes.less | 0 assets/{src/less => styles}/editor-style.less | 0 .../{src/less => styles}/layouts/_footer.less | 0 .../less => styles}/layouts/_general.less | 0 .../{src/less => styles}/layouts/_header.less | 0 .../{src/less => styles}/layouts/_pages.less | 0 .../{src/less => styles}/layouts/_posts.less | 0 .../less => styles}/layouts/_sidebar.less | 0 .../less => styles}/layouts/pages/_home.less | 0 assets/{src/less => styles}/main.less | 0 gulpfile.js | 83 +++++++++-------- lib/assets.php | 24 ++--- lib/init.php | 2 +- 24 files changed, 150 insertions(+), 145 deletions(-) rename assets/{src => }/fonts/.gitkeep (100%) rename assets/{src/img => images}/.gitkeep (100%) rename assets/{src/js => scripts}/main.js (100%) delete mode 100644 assets/src/less/_bootstrap.less create mode 100644 assets/styles/_bootstrap.less rename assets/{src/less => styles}/_global.less (100%) rename assets/{src/less => styles}/_variables.less (100%) rename assets/{src/less => styles}/components/_buttons.less (100%) rename assets/{src/less => styles}/components/_forms.less (100%) rename assets/{src/less => styles}/components/_media.less (100%) rename assets/{src/less => styles}/components/_wp-classes.less (100%) rename assets/{src/less => styles}/editor-style.less (100%) rename assets/{src/less => styles}/layouts/_footer.less (100%) rename assets/{src/less => styles}/layouts/_general.less (100%) rename assets/{src/less => styles}/layouts/_header.less (100%) rename assets/{src/less => styles}/layouts/_pages.less (100%) rename assets/{src/less => styles}/layouts/_posts.less (100%) rename assets/{src/less => styles}/layouts/_sidebar.less (100%) rename assets/{src/less => styles}/layouts/pages/_home.less (100%) rename assets/{src/less => styles}/main.less (100%) 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/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/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/styles/_bootstrap.less b/assets/styles/_bootstrap.less new file mode 100644 index 0000000..d592f99 --- /dev/null +++ b/assets/styles/_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"; 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 100% rename from assets/src/less/main.less rename to assets/styles/main.less diff --git a/gulpfile.js b/gulpfile.js index 6592574..5891138 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,21 +3,26 @@ var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); +var build = { + src: 'assets/', + dist: 'dist/' +}; + var paths = { scripts: [ - 'assets/src/js/**/*' + build.src + 'scripts/**/*' ], jshint: [ 'bower.json', 'gulpfile.js', - 'assets/src/js/**/*' + build.src + 'scripts/**/*' ], - less: 'assets/src/less/main.less', - editorStyle: 'assets/src/less/editor-style.less' + styles: build.src + 'styles/main.less', + editorStyle: build.src + 'styles/editor-style.less' }; -gulp.task('less:dev', function() { - return gulp.src(paths.less) +gulp.task('styles:dev', function() { + return gulp.src(paths.styles) .pipe($.plumber()) .pipe($.sourcemaps.init()) .pipe($.less()).on('error', function(err) { @@ -25,32 +30,32 @@ gulp.task('less:dev', function() { }) .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($.rename('main.css')) + .pipe(gulp.dest(build.dist + 'styles')) .pipe($.livereload({ auto: false })); }); -gulp.task('less:build', function() { - return gulp.src(paths.less) +gulp.task('styles:build', function() { + return gulp.src(paths.styles) .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($.rename('main.css')) .pipe($.minifyCss()) - .pipe(gulp.dest('assets/dist/css')); + .pipe(gulp.dest(build.dist + 'styles')); }); -gulp.task('less:editorStyle', function() { +gulp.task('styles: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')); + .pipe($.rename('editor-style.css')) + .pipe(gulp.dest(build.dist + 'styles')); }); gulp.task('jshint', function() { @@ -60,73 +65,73 @@ gulp.task('jshint', function() { .pipe($.jshint.reporter('fail')); }); -gulp.task('js:dev', ['jshint'], function() { +gulp.task('scripts: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($.concat('scripts.js')) + .pipe(gulp.dest(build.dist + 'scripts')) .pipe($.livereload({ auto: false })); }); -gulp.task('js:build', ['jshint'], function() { +gulp.task('scripts:build', ['jshint'], function() { return gulp.src(require('main-bower-files')().concat(paths.scripts)) .pipe($.filter('**/*.js')) - .pipe($.concat('./scripts.min.js')) + .pipe($.concat('scripts.js')) .pipe($.uglify()) - .pipe(gulp.dest('assets/dist/js')); + .pipe(gulp.dest(build.dist + 'scripts')); }); gulp.task('copy:fonts', function() { - return gulp.src(require('main-bower-files')().concat('asset/src/fonts/**/*')) + return gulp.src(require('main-bower-files')().concat(build.src + 'fonts/**/*')) .pipe($.filter('**/*.{eot,svg,ttf,woff}')) - .pipe(gulp.dest('assets/dist/fonts')); + .pipe(gulp.dest(build.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')); + return gulp.src(['bower_components/jquery/dist/jquery.js']) + .pipe($.rename('jquery.js')) + .pipe(gulp.dest(build.dist + 'scripts')); }); 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')); + .pipe($.rename('modernizr.js')) + .pipe(gulp.dest(build.dist + 'scripts')); }); gulp.task('images', function() { - return gulp.src('assets/src/img/**/*') + return gulp.src(build.src + 'src/images/**/*') .pipe($.imagemin({ progressive: true, interlaced: true })) - .pipe(gulp.dest('assets/dist/img')); + .pipe(gulp.dest(build.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([build.dist + 'styles/main.css', build.dist + 'js/scripts.js'], { base: build.dist }) + .pipe(gulp.dest(build.dist)) .pipe($.rev()) - .pipe(gulp.dest('assets/dist')) + .pipe(gulp.dest(build.dist)) .pipe($.rev.manifest()) - .pipe(gulp.dest('assets/dist')); + .pipe(gulp.dest(build.dist)); }); gulp.task('clean', function() { - return gulp.src(['assets/dist/css/main.min*', 'assets/dist/js/scripts.min*'], { read: false }) + return gulp.src(build.dist, { read: false }) .pipe($.clean()); }); 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([build.src + 'styles/**/*', 'bower.json'], ['styles:dev']); + gulp.watch([build.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts:dev']); 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('default', ['styles:dev', 'styles:editorStyle', 'jshint', 'scripts: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:build', 'styles:editorStyle', 'scripts:build', 'copy:fonts', 'copy:jquery', 'copy:modernizr', 'images', 'version']); diff --git a/lib/assets.php b/lib/assets.php index 25cb8b2..67b7952 100644 --- a/lib/assets.php +++ b/lib/assets.php @@ -3,12 +3,12 @@ * 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/scripts.js * * Google Analytics is loaded after enqueued scripts if: * - An ID has been defined in config.php @@ -16,10 +16,10 @@ */ function roots_asset_path($filename_dev, $filename) { if (WP_ENV === 'development') { - return get_template_directory_uri() . '/assets/dist/' . $filename_dev; + return get_template_directory_uri() . '/dist/' . $filename_dev; } - $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', 'styles/main.css'), false, null); /** * jQuery is loaded using the same method from HTML5 Boilerplate: @@ -46,7 +46,7 @@ function roots_assets() { 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 +56,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('modernizr', roots_asset_path('scripts/modernizr.js', '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/scripts.js', 'scripts/scripts.js'), array(), null, true); } add_action('wp_enqueue_scripts', 'roots_assets', 100); @@ -67,7 +67,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'); From 75db78a9a1be9370ea9763103d4415476722d69f Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Sun, 23 Nov 2014 00:16:07 -0600 Subject: [PATCH 2/5] Remove disparity between dev and prod gulp tasks removes `gulp dev` in favor of `gulp` adds `gulp --rev` to produce revved asset manifest adds `gulp --tasks` to the readme removes postinstall script removes bower dep --- README.md | 4 ++-- gulpfile.js | 45 ++++++++++++++------------------------------- lib/assets.php | 16 ++++++---------- package.json | 9 +++------ 4 files changed, 25 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 93eafff..1ed30df 100644 --- a/README.md +++ b/README.md @@ -74,10 +74,10 @@ 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 LESS to CSS, concatenate and validate JS * `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/gulpfile.js b/gulpfile.js index 5891138..90598b1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,7 +1,6 @@ /*global $:true*/ var gulp = require('gulp'); - -var $ = require('gulp-load-plugins')(); +var $ = require('gulp-load-plugins')(); var build = { src: 'assets/', @@ -21,7 +20,7 @@ var paths = { editorStyle: build.src + 'styles/editor-style.less' }; -gulp.task('styles:dev', function() { +gulp.task('styles', function() { return gulp.src(paths.styles) .pipe($.plumber()) .pipe($.sourcemaps.init()) @@ -29,21 +28,9 @@ gulp.task('styles:dev', function() { console.warn(err.message); }) .pipe($.autoprefixer('last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12')) + .pipe($.minifyCss()) .pipe($.sourcemaps.write()) .pipe($.rename('main.css')) - .pipe(gulp.dest(build.dist + 'styles')) - .pipe($.livereload({ auto: false })); -}); - -gulp.task('styles:build', function() { - return gulp.src(paths.styles) - .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.css')) - .pipe($.minifyCss()) .pipe(gulp.dest(build.dist + 'styles')); }); @@ -65,15 +52,7 @@ gulp.task('jshint', function() { .pipe($.jshint.reporter('fail')); }); -gulp.task('scripts:dev', ['jshint'], function() { - return gulp.src(require('main-bower-files')().concat(paths.scripts)) - .pipe($.filter('**/*.js')) - .pipe($.concat('scripts.js')) - .pipe(gulp.dest(build.dist + 'scripts')) - .pipe($.livereload({ auto: false })); -}); - -gulp.task('scripts:build', ['jshint'], function() { +gulp.task('scripts', ['jshint'], function() { return gulp.src(require('main-bower-files')().concat(paths.scripts)) .pipe($.filter('**/*.js')) .pipe($.concat('scripts.js')) @@ -110,7 +89,7 @@ gulp.task('images', function() { }); gulp.task('version', function() { - return gulp.src([build.dist + 'styles/main.css', build.dist + 'js/scripts.js'], { base: build.dist }) + return gulp.src([build.dist + 'styles/main.css', build.dist + 'scripts/scripts.js'], { base: build.dist }) .pipe(gulp.dest(build.dist)) .pipe($.rev()) .pipe(gulp.dest(build.dist)) @@ -125,13 +104,17 @@ gulp.task('clean', function() { gulp.task('watch', function() { $.livereload.listen(); - gulp.watch([build.src + 'styles/**/*', 'bower.json'], ['styles:dev']); - gulp.watch([build.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts:dev']); + gulp.watch([build.src + 'styles/**/*', 'bower.json'], ['styles']); + gulp.watch([build.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts']); gulp.watch('**/*.php').on('change', function(file) { $.livereload.changed(file.path); }); }); -gulp.task('default', ['styles:dev', 'styles:editorStyle', 'jshint', 'scripts:dev', 'copy:fonts', 'images']); -gulp.task('dev', ['default']); -gulp.task('build', ['styles:build', 'styles:editorStyle', 'scripts:build', 'copy:fonts', 'copy:jquery', 'copy:modernizr', 'images', 'version']); +gulp.task('build', ['styles', 'styles:editorStyle', 'scripts', 'copy:fonts', 'copy:jquery', 'copy:modernizr', 'images'], function () { + gulp.start('version'); +}); + +gulp.task('default', ['clean'], function () { + gulp.start('build'); +}); diff --git a/lib/assets.php b/lib/assets.php index 67b7952..c668ed2 100644 --- a/lib/assets.php +++ b/lib/assets.php @@ -14,9 +14,9 @@ * - 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() . '/dist/' . $filename_dev; + return get_template_directory_uri() . '/dist/' . $filename; } $manifest_path = get_template_directory() . '/dist/rev-manifest.json'; @@ -33,7 +33,7 @@ function roots_asset_path($filename_dev, $filename) { } function roots_assets() { - wp_enqueue_style('roots_css', roots_asset_path('styles/main.css', 'styles/main.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.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('scripts/modernizr.js', 'scripts/modernizr.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('scripts/scripts.js', 'scripts/scripts.js'), array(), null, true); + wp_enqueue_script('roots_js', roots_asset_path('scripts/scripts.js'), array(), null, true); } add_action('wp_enqueue_scripts', 'roots_assets', 100); diff --git a/package.json b/package.json index d4f9e78..60ef200 100644 --- a/package.json +++ b/package.json @@ -16,15 +16,12 @@ "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": "^3.8.10", "gulp-autoprefixer": "^0.0.7", "gulp-clean": "^0.3.1", "gulp-concat": "^2.3.4", @@ -42,8 +39,8 @@ "gulp-sourcemaps": "^1.1.1", "gulp-uglify": "^0.3.1", "imagemin-pngcrush": "^1.0.0", - "jshint-stylish": "^0.4.0", "jquery": "1.11.1", + "jshint-stylish": "^0.4.0", "lodash": "^2.4.1", "main-bower-files": "^1.0.1" } From e2091ef88065881ca3b5afa99b15c9f04e8cc7ec Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Sun, 23 Nov 2014 21:53:18 -0600 Subject: [PATCH 3/5] 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 | 3 +- assets/manifest.json | 22 +++++ gulpfile.js | 211 ++++++++++++++++++++++++++++--------------- lib/assets.php | 4 +- package.json | 27 +++--- 5 files changed, 179 insertions(+), 88 deletions(-) create mode 100644 assets/manifest.json diff --git a/README.md b/README.md index 1ed30df..469a1bd 100644 --- a/README.md +++ b/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 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/gulpfile.js b/gulpfile.js index 90598b1..7733173 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,117 +1,184 @@ /*global $:true*/ -var gulp = require('gulp'); -var $ = require('gulp-load-plugins')(); +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 = { - src: 'assets/', - dist: 'dist/' -}; +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 = { - scripts: [ - build.src + 'scripts/**/*' - ], - jshint: [ - 'bower.json', - 'gulpfile.js', - build.src + 'scripts/**/*' - ], - styles: build.src + 'styles/main.less', - editorStyle: build.src + 'styles/editor-style.less' -}; + if(_.isPlainObject(m)) { + m = _.defaults(m, defaults); -gulp.task('styles', function() { - return gulp.src(paths.styles) - .pipe($.plumber()) - .pipe($.sourcemaps.init()) - .pipe($.less()).on('error', function(err) { - console.warn(err.message); + _.forEach(required, function (req) { + if(!obj.has(m, req)) { + err('missing "'+req+'" property'); + } + }); + + 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($.minifyCss()) - .pipe($.sourcemaps.write()) - .pipe($.rename('main.css')) - .pipe(gulp.dest(build.dist + 'styles')); + .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('styles', ['styles:editorStyle'], function() { + return gulp.src(globs.styles) + .pipe(cssTasks('main.css')); }); gulp.task('styles: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(build.dist + 'styles')); + 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('scripts', ['jshint'], function() { - return gulp.src(require('main-bower-files')().concat(paths.scripts)) - .pipe($.filter('**/*.js')) - .pipe($.concat('scripts.js')) - .pipe($.uglify()) - .pipe(gulp.dest(build.dist + 'scripts')); +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('copy:fonts', function() { - return gulp.src(require('main-bower-files')().concat(build.src + 'fonts/**/*')) - .pipe($.filter('**/*.{eot,svg,ttf,woff}')) - .pipe(gulp.dest(build.dist + 'fonts')); +gulp.task('scripts:ignored', function () { + return gulp.src(globs.scriptsIgnored) + .pipe(jsTasks()); }); -gulp.task('copy:jquery', function() { - return gulp.src(['bower_components/jquery/dist/jquery.js']) - .pipe($.rename('jquery.js')) - .pipe(gulp.dest(build.dist + 'scripts')); -}); - -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('fonts', function() { + return gulp.src(globs.fonts) + .pipe($.flatten()) + .pipe(gulp.dest(path.dist + 'fonts')); }); 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 }) - .pipe(gulp.dest(build.dist)) + return gulp.src([path.dist + '**/*.{js,css}'], { base: path.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() { - return gulp.src(build.dist, { read: false }) - .pipe($.clean()); -}); +gulp.task('clean', require('del').bind(null, [path.dist])); gulp.task('watch', function() { $.livereload.listen(); - gulp.watch([build.src + 'styles/**/*', 'bower.json'], ['styles']); - gulp.watch([build.src + 'scripts/**/*', 'bower.json'], ['jshint', 'scripts']); + gulp.watch([path.src + 'styles/**/*', 'bower.json'], ['styles']); + 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'); }); diff --git a/lib/assets.php b/lib/assets.php index c668ed2..a670be2 100644 --- a/lib/assets.php +++ b/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); diff --git a/package.json b/package.json index 60ef200..a91d162 100644 --- a/package.json +++ b/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-clean": "^0.3.1", + "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", - "jquery": "1.11.1", - "jshint-stylish": "^0.4.0", + "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" } } From df004917b7c674bdc33c68a40a438276162e704c Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Sun, 23 Nov 2014 22:23:36 -0600 Subject: [PATCH 4/5] Use wiredep for sass and less injection https://github.com/taptapship/wiredep all third-party deps are injected via wiredep rather than manually managed --- assets/styles/_bootstrap.less | 92 ----------------------------------- assets/styles/main.less | 5 +- bower.json | 1 + gulpfile.js | 10 +++- 4 files changed, 13 insertions(+), 95 deletions(-) delete mode 100644 assets/styles/_bootstrap.less diff --git a/assets/styles/_bootstrap.less b/assets/styles/_bootstrap.less deleted file mode 100644 index d592f99..0000000 --- a/assets/styles/_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/styles/main.less b/assets/styles/main.less index aec9850..49f61a5 100644 --- a/assets/styles/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 7733173..3f08b44 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -102,7 +102,7 @@ var cssTasks = function(filename) { .pipe(gulp.dest, path.dist + 'styles')(); }; -gulp.task('styles', ['styles:editorStyle'], function() { +gulp.task('styles', ['wiredep', 'styles:editorStyle'], function() { return gulp.src(globs.styles) .pipe(cssTasks('main.css')); }); @@ -173,6 +173,7 @@ gulp.task('watch', function() { $.livereload.listen(); 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); }); @@ -182,6 +183,13 @@ 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'); }); From 063a77d1490c08e681ef3c5975b7344860dbfa7f Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Mon, 24 Nov 2014 11:33:32 -0600 Subject: [PATCH 5/5] Refactor: remove manifest file concerns https://github.com/austinpray/asset-builder Moves all manifest parsing concerns to separate node module --- gulpfile.js | 77 ++-------------------------------------------------- package.json | 1 + 2 files changed, 3 insertions(+), 75 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 3f08b44..97f0f36 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,84 +5,11 @@ 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'); -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']; - - if(_.isPlainObject(m)) { - m = _.defaults(m, defaults); - - _.forEach(required, function (req) { - if(!obj.has(m, req)) { - err('missing "'+req+'" property'); - } - }); - - 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 manifest = require('asset-builder')('./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 globs = manifest.globs; var cssTasks = function(filename) { return lazypipe() diff --git a/package.json b/package.json index a91d162..6e6884e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "node": ">= 0.10.0" }, "devDependencies": { + "asset-builder": "0.0.1", "del": "^0.1.3", "gulp": "^3.8.10", "gulp-autoprefixer": "^2.0.0",