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" } }