framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1270 from austinpray/fix-gulp-rev

Browse Source 
[WIP] [8.0.0] Reworks asset revving
This commit is contained in:
Austin Pray
2015-01-24 14:05:11 -06:00
parent 04528c2603 a3040c496a
commit dfe0cd8a2c
3 changed files with 148 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
gulpfile.js
View File

@@ -1,22 +1,65 @@
// ## Globals
/*global $:true*/
var $ = require('gulp-load-plugins')();
var _ = require('lodash');
var argv = require('yargs').argv;
var gulp = require('gulp');
var lazypipe = require('lazypipe');
var manifest = require('asset-builder')('./assets/manifest.json');
var merge = require('merge-stream');
var mapsEnabled = !argv.production;
// See https://github.com/austinpray/asset-builder
var manifest = require('asset-builder')('./assets/manifest.json');
// `path` - Paths to base asset directories. With trailing slashes.
// - `path.source` - Path to the source files. default: `assets/`
// - `path.dist` - Path to the build directory. default: `dist/`
var path = manifest.paths;
// `globs` - These ultimately end up in their respective `gulp.src`.
// - `globs.js` - array of asset-builder js Depenency objects. Example:
// ```
// { type: 'js', name: 'main.js', globs: [] }
// ```
// - `globs.css` an array of asset-builder css Depenency objects. Example:
// ```
// { type: 'css', name: 'main.css', globs: [] }
// ```
// - `globs.fonts` - array of font path globs
// - `globs.images` - array of image path globs
// - `globs.bower` - array of all the bower main files
var globs = manifest.globs;
// `project` - paths to first-party assets.
// - `project.js` - array of first-party js assets
// - `project.css` - array of first-party js assets
var project = manifest.getProjectGlobs();
// CLI options
var enabled = {
// Enable static asset revisioning when `--production`
rev: argv.production,
// Disable source maps when `--production`
maps: !argv.production
};
// Path to the compiled assets manifest in the dist directory
var revManifest = path.dist + 'assets.json';
// ## Reusable Pipelines
// see https://github.com/OverZealous/lazypipe
// ### CSS processing pipeline
// Example
// ```
// gulp.src(cssFiles)
// .pipe(cssTasks('main.css')
// .pipe(gulp.dest(path.dist + 'styles'))
// ```
var cssTasks = function(filename) {
return lazypipe()
.pipe($.plumber)
.pipe(function() {
return $.if(mapsEnabled, $.sourcemaps.init());
return $.if(enabled.maps, $.sourcemaps.init());
})
.pipe(function() {
return $.if('*.less', $.less().on('error', function(err) {
@@ -41,62 +84,90 @@ var cssTasks = function(filename) {
}
})
.pipe(function() {
return $.if(mapsEnabled, $.sourcemaps.write('.'));
return $.if(enabled.rev, $.rev());
})
.pipe(gulp.dest, path.dist + 'styles')
.pipe($.livereload)();
.pipe(function() {
return $.if(enabled.maps, $.sourcemaps.write('.'));
})();
};
// ### JS processing pipeline
// Example
// ```
// gulp.src(jsFiles)
// .pipe(jsTasks('main.js')
// .pipe(gulp.dest(path.dist + 'scripts'))
// ```
var jsTasks = function(filename) {
return lazypipe()
.pipe(function() {
return $.if(enabled.maps, $.sourcemaps.init());
})
.pipe($.concat, filename)
.pipe($.uglify)
.pipe(function() {
return $.if(enabled.rev, $.rev());
})
.pipe(function() {
return $.if(enabled.maps, $.sourcemaps.write('.'));
})();
};
// ### Write to Rev Manifest
// If there are any revved files then write them to the rev manifest.
// See https://github.com/sindresorhus/gulp-rev
var writeToManifest = function(directory) {
return lazypipe()
.pipe(gulp.dest, path.dist + directory)
.pipe($.livereload)
.pipe($.rev.manifest, revManifest, {
base: path.dist,
merge: true
})
.pipe(gulp.dest, path.dist)();
};
// ## Gulp Tasks
// Run `gulp -T` for a task summary
// ### Styles
// `gulp styles` - compiles, combines, and optimizes bower css and project css.
gulp.task('styles', function() {
var merged = merge();
manifest.forEachDependency('css', function(dep) {
merged.add(gulp.src(dep.globs)
.pipe(cssTasks(dep.name)));
});
return merged;
return merged
.pipe(writeToManifest('styles'));
});
gulp.task('jshint', function() {
return gulp.src([
'bower.json', 'gulpfile.js'
].concat(project.js))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'));
});
var jsTasks = function(filename) {
var fn = filename;
return lazypipe()
.pipe(function() {
return $.if(mapsEnabled, $.sourcemaps.init());
})
.pipe(function() {
return $.if(!!fn, $.concat(fn || 'all.js'));
})
.pipe($.uglify)
.pipe(function() {
return $.if(mapsEnabled, $.sourcemaps.write('.'));
})
.pipe(gulp.dest, path.dist + 'scripts')
.pipe($.livereload)();
};
// ### Scripts
// `gulp scripts` - runs jshint then compiles, combines, and optimizes bower
// javascript and project javascript
gulp.task('scripts', ['jshint'], function() {
var merged = merge();
manifest.forEachDependency('js', function(dep) {
merged.add(gulp.src(dep.globs)
.pipe(jsTasks(dep.name)));
merged.add(
gulp.src(dep.globs)
.pipe(jsTasks(dep.name))
);
});
return merged;
return merged
.pipe(writeToManifest('scripts'));
});
// ### Fonts
// `gulp fonts` - grabs all the fonts and outputs them in a flattened directory
// structure. See: https://github.com/armed/gulp-flatten
gulp.task('fonts', function() {
return gulp.src(globs.fonts)
.pipe($.flatten())
.pipe(gulp.dest(path.dist + 'fonts'));
});
// ### Images
// `gulp images` - run lossless compression on all the images.
gulp.task('images', function() {
return gulp.src(globs.images)
.pipe($.imagemin({
@@ -106,17 +177,23 @@ gulp.task('images', function() {
.pipe(gulp.dest(path.dist + 'images'));
});
gulp.task('version', function() {
return gulp.src([path.dist + '**/*.{js,css}'], {base: path.dist})
.pipe(gulp.dest(path.dist))
.pipe($.rev())
.pipe(gulp.dest(path.dist))
.pipe($.rev.manifest())
.pipe(gulp.dest(path.dist));
// ### JsHint
// `gulp jshint` - lints configuration JSON and project javascript
gulp.task('jshint', function() {
return gulp.src([
'bower.json', 'gulpfile.js'
].concat(project.js))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'));
});
// ### Clean
// `gulp clean` - deletes the build folder entirely
gulp.task('clean', require('del').bind(null, [path.dist]));
// ### Watch
// `gulp watch` - recompile assets whenever they change
gulp.task('watch', function() {
$.livereload.listen();
gulp.watch([path.source + 'styles/**/*'], ['styles']);
@@ -127,10 +204,14 @@ gulp.task('watch', function() {
});
});
gulp.task('build', ['styles', 'scripts', 'fonts', 'images'], function() {
gulp.start('version');
});
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['styles', 'scripts', 'fonts', 'images']);
// ### Wiredep
// `gulp wiredep` - Automatically inject less and Sass bower dependencies. See
// https://github.com/taptapship/wiredep
gulp.task('wiredep', function() {
var wiredep = require('wiredep').stream;
return gulp.src(project.css)
@@ -139,6 +220,8 @@ gulp.task('wiredep', function() {
.pipe(gulp.dest(path.source + 'styles'));
});
// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
gulp.start('build');
});

24
lib/assets.php
View File

@@ -18,11 +18,11 @@ namespace Roots\Sage\Assets;
* - You're not logged in as an administrator
*/
function asset_path($filename) {
if (WP_ENV === 'development') {
return get_template_directory_uri() . '/dist/' . $filename;
}
$dist_path = get_template_directory_uri() . '/dist/';
$directory = dirname($filename) . '/';
$file = basename($filename);
$manifest_path = get_template_directory() . '/dist/rev-manifest.json';
$manifest_path = get_template_directory() . '/dist/assets.json';
if (file_exists($manifest_path)) {
$manifest = json_decode(file_get_contents($manifest_path), true);
@@ -30,8 +30,10 @@ function asset_path($filename) {
$manifest = [];
}
if (array_key_exists($filename, $manifest)) {
return get_template_directory_uri() . '/dist/' . $manifest[$filename];
if (WP_ENV !== 'development' && array_key_exists($file, $manifest)) {
return $dist_path . $directory . $manifest[$file];
} else {
return $dist_path . $directory . $file;
}
}
@@ -52,6 +54,15 @@ function assets() {
add_filter('script_loader_src', __NAMESPACE__ . '\\jquery_local_fallback', 10, 2);
}
/**
* Livereload client
* https://github.com/livereload/livereload-js
*/
if (WP_ENV === 'development') {
wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
wp_enqueue_script('livereload');
}
if (is_single() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
@@ -108,3 +119,4 @@ function google_analytics() {
if (GOOGLE_ANALYTICS_ID) {
add_action('wp_footer', __NAMESPACE__ . '\\google_analytics', 20);
}

2
package.json
View File

@@ -40,7 +40,7 @@
"gulp-pleeease": "^1.1.0",
"gulp-plumber": "^0.6.3",
"gulp-rename": "^1.2.0",
"gulp-rev": "^2.0.1",
"gulp-rev": "^3.0.0",
"gulp-sass": "^1.2.4",
"gulp-sourcemaps": "^1.1.1",
"gulp-uglify": "^1.0.1",