Untitled diff
0 removals
292 lines
12 additions
303 lines
// ## Globals
// ## Globals
var argv = require('minimist')(process.argv.slice(2));
var argv = require('minimist')(process.argv.slice(2));
var autoprefixer = require('gulp-autoprefixer');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var browserSync = require('browser-sync').create();
var changed = require('gulp-changed');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var concat = require('gulp-concat');
var flatten = require('gulp-flatten');
var flatten = require('gulp-flatten');
var gulp = require('gulp');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var gulpif = require('gulp-if');
var imagemin = require('gulp-imagemin');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var jshint = require('gulp-jshint');
var lazypipe = require('lazypipe');
var lazypipe = require('lazypipe');
var less = require('gulp-less');
var less = require('gulp-less');
var merge = require('merge-stream');
var merge = require('merge-stream');
var minifyCss = require('gulp-minify-css');
var minifyCss = require('gulp-minify-css');
var plumber = require('gulp-plumber');
var plumber = require('gulp-plumber');
var rev = require('gulp-rev');
var rev = require('gulp-rev');
var runSequence = require('run-sequence');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var uglify = require('gulp-uglify');
var uncss = require('gulp-uncss');
var exec = require('gulp-exec');
// See https://github.com/austinpray/asset-builder
// See https://github.com/austinpray/asset-builder
var manifest = require('asset-builder')('./assets/manifest.json');
var manifest = require('asset-builder')('./assets/manifest.json');
// `path` - Paths to base asset directories. With trailing slashes.
// `path` - Paths to base asset directories. With trailing slashes.
// - `path.source` - Path to the source files. Default: `assets/`
// - `path.source` - Path to the source files. Default: `assets/`
// - `path.dist` - Path to the build directory. Default: `dist/`
// - `path.dist` - Path to the build directory. Default: `dist/`
var path = manifest.paths;
var path = manifest.paths;
// `config` - Store arbitrary configuration values here.
// `config` - Store arbitrary configuration values here.
var config = manifest.config || {};
var config = manifest.config || {};
// `globs` - These ultimately end up in their respective `gulp.src`.
// `globs` - These ultimately end up in their respective `gulp.src`.
// - `globs.js` - Array of asset-builder JS dependency objects. Example:
// - `globs.js` - Array of asset-builder JS dependency objects. Example:
// ```
// ```
// {type: 'js', name: 'main.js', globs: []}
// {type: 'js', name: 'main.js', globs: []}
// ```
// ```
// - `globs.css` - Array of asset-builder CSS dependency objects. Example:
// - `globs.css` - Array of asset-builder CSS dependency objects. Example:
// ```
// ```
// {type: 'css', name: 'main.css', globs: []}
// {type: 'css', name: 'main.css', globs: []}
// ```
// ```
// - `globs.fonts` - Array of font path globs.
// - `globs.fonts` - Array of font path globs.
// - `globs.images` - Array of image path globs.
// - `globs.images` - Array of image path globs.
// - `globs.bower` - Array of all the main Bower files.
// - `globs.bower` - Array of all the main Bower files.
var globs = manifest.globs;
var globs = manifest.globs;
// `project` - paths to first-party assets.
// `project` - paths to first-party assets.
// - `project.js` - Array of first-party JS assets.
// - `project.js` - Array of first-party JS assets.
// - `project.css` - Array of first-party CSS assets.
// - `project.css` - Array of first-party CSS assets.
var project = manifest.getProjectGlobs();
var project = manifest.getProjectGlobs();
// CLI options
// CLI options
var enabled = {
var enabled = {
// Enable static asset revisioning when `--production`
// Enable static asset revisioning when `--production`
rev: argv.production,
rev: argv.production,
// Disable source maps when `--production`
// Disable source maps when `--production`
maps: !argv.production,
maps: !argv.production,
// Fail styles task on error when `--production`
// Fail styles task on error when `--production`
failStyleTask: argv.production,
failStyleTask: argv.production,
// Fail due to JSHint warnings only when `--production`
// Fail due to JSHint warnings only when `--production`
failJSHint: argv.production,
failJSHint: argv.production,
// Strip debug statments from javascript when `--production`
// Strip debug statments from javascript when `--production`
stripJSDebug: argv.production
stripJSDebug: argv.production,
// UnCSS when `--production`
unCss: argv.production
};
};
// Path to the compiled assets manifest in the dist directory
// Path to the compiled assets manifest in the dist directory
var revManifest = path.dist + 'assets.json';
var revManifest = path.dist + 'assets.json';
// ## Reusable Pipelines
// ## Reusable Pipelines
// See https://github.com/OverZealous/lazypipe
// See https://github.com/OverZealous/lazypipe
// ### CSS processing pipeline
// ### CSS processing pipeline
// Example
// Example
// ```
// ```
// gulp.src(cssFiles)
// gulp.src(cssFiles)
// .pipe(cssTasks('main.css')
// .pipe(cssTasks('main.css')
// .pipe(gulp.dest(path.dist + 'styles'))
// .pipe(gulp.dest(path.dist + 'styles'))
// ```
// ```
var cssTasks = function(filename) {
var cssTasks = function(filename) {
return lazypipe()
return lazypipe()
.pipe(exec, 'curl --silent --output sitemap.json '+manifest.config.devUrl+'?show_sitemap')
.pipe(function() {
.pipe(function() {
return gulpif(!enabled.failStyleTask, plumber());
return gulpif(!enabled.failStyleTask, plumber());
})
})
.pipe(function() {
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.init());
return gulpif(enabled.maps, sourcemaps.init());
})
})
.pipe(function() {
.pipe(function() {
return gulpif('*.less', less());
return gulpif('*.less', less());
})
})
.pipe(function() {
.pipe(function() {
return gulpif('*.scss', sass({
return gulpif('*.scss', sass({
outputStyle: 'nested', // libsass doesn't support expanded yet
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
precision: 10,
includePaths: ['.'],
includePaths: ['.'],
errLogToConsole: !enabled.failStyleTask
errLogToConsole: !enabled.failStyleTask
}));
}));
})
})
.pipe(concat, filename)
.pipe(concat, filename)
.pipe(function() {
return gulpif(enabled.unCss, uncss({
html: require('./sitemap.json')
}));
})
.pipe(autoprefixer, {
.pipe(autoprefixer, {
browsers: [
browsers: [
'last 2 versions',
'last 2 versions',
'ie 8',
'ie 8',
'ie 9',
'ie 9',
'android 2.3',
'android 2.3',
'android 4',
'android 4',
'opera 12'
'opera 12'
]
]
})
})
.pipe(minifyCss, {
.pipe(minifyCss, {
advanced: false,
advanced: false,
rebase: false
rebase: false
})
})
.pipe(function() {
.pipe(function() {
return gulpif(enabled.rev, rev());
return gulpif(enabled.rev, rev());
})
})
.pipe(function() {
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.write('.', {
return gulpif(enabled.maps, sourcemaps.write('.', {
sourceRoot: 'assets/styles/'
sourceRoot: 'assets/styles/'
}));
}));
})();
})();
};
};
// ### JS processing pipeline
// ### JS processing pipeline
// Example
// Example
// ```
// ```
// gulp.src(jsFiles)
// gulp.src(jsFiles)
// .pipe(jsTasks('main.js')
// .pipe(jsTasks('main.js')
// .pipe(gulp.dest(path.dist + 'scripts'))
// .pipe(gulp.dest(path.dist + 'scripts'))
// ```
// ```
var jsTasks = function(filename) {
var jsTasks = function(filename) {
return lazypipe()
return lazypipe()
.pipe(function() {
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.init());
return gulpif(enabled.maps, sourcemaps.init());
})
})
.pipe(concat, filename)
.pipe(concat, filename)
.pipe(uglify, {
.pipe(uglify, {
compress: {
compress: {
'drop_debugger': enabled.stripJSDebug
'drop_debugger': enabled.stripJSDebug
}
}
})
})
.pipe(function() {
.pipe(function() {
return gulpif(enabled.rev, rev());
return gulpif(enabled.rev, rev());
})
})
.pipe(function() {
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.write('.', {
return gulpif(enabled.maps, sourcemaps.write('.', {
sourceRoot: 'assets/scripts/'
sourceRoot: 'assets/scripts/'
}));
}));
})();
})();
};
};
// ### Write to rev manifest
// ### Write to rev manifest
// If there are any revved files then write them to the rev manifest.
// If there are any revved files then write them to the rev manifest.
// See https://github.com/sindresorhus/gulp-rev
// See https://github.com/sindresorhus/gulp-rev
var writeToManifest = function(directory) {
var writeToManifest = function(directory) {
return lazypipe()
return lazypipe()
.pipe(gulp.dest, path.dist + directory)
.pipe(gulp.dest, path.dist + directory)
.pipe(browserSync.stream, {match: '**/*.{js,css}'})
.pipe(browserSync.stream, {match: '**/*.{js,css}'})
.pipe(rev.manifest, revManifest, {
.pipe(rev.manifest, revManifest, {
base: path.dist,
base: path.dist,
merge: true
merge: true
})
})
.pipe(gulp.dest, path.dist)();
.pipe(gulp.dest, path.dist)();
};
};
// ## Gulp tasks
// ## Gulp tasks
// Run `gulp -T` for a task summary
// Run `gulp -T` for a task summary
// ### Styles
// ### Styles
// `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
// `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
// By default this task will only log a warning if a precompiler error is
// By default this task will only log a warning if a precompiler error is
// raised. If the `--production` flag is set: this task will fail outright.
// raised. If the `--production` flag is set: this task will fail outright.
gulp.task('styles', ['wiredep'], function() {
gulp.task('styles', ['wiredep'], function() {
var merged = merge();
var merged = merge();
manifest.forEachDependency('css', function(dep) {
manifest.forEachDependency('css', function(dep) {
var cssTasksInstance = cssTasks(dep.name);
var cssTasksInstance = cssTasks(dep.name);
if (!enabled.failStyleTask) {
if (!enabled.failStyleTask) {
cssTasksInstance.on('error', function(err) {
cssTasksInstance.on('error', function(err) {
console.error(err.message);
console.error(err.message);
this.emit('end');
this.emit('end');
});
});
}
}
merged.add(gulp.src(dep.globs, {base: 'styles'})
merged.add(gulp.src(dep.globs, {base: 'styles'})
.pipe(cssTasksInstance));
.pipe(cssTasksInstance));
});
});
return merged
return merged
.pipe(writeToManifest('styles'));
.pipe(writeToManifest('styles'));
});
});
// ### Scripts
// ### Scripts
// `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
// `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
// and project JS.
// and project JS.
gulp.task('scripts', ['jshint'], function() {
gulp.task('scripts', ['jshint'], function() {
var merged = merge();
var merged = merge();
manifest.forEachDependency('js', function(dep) {
manifest.forEachDependency('js', function(dep) {
merged.add(
merged.add(
gulp.src(dep.globs, {base: 'scripts'})
gulp.src(dep.globs, {base: 'scripts'})
.pipe(jsTasks(dep.name))
.pipe(jsTasks(dep.name))
);
);
});
});
return merged
return merged
.pipe(writeToManifest('scripts'));
.pipe(writeToManifest('scripts'));
});
});
// ### Fonts
// ### Fonts
// `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
// `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
// structure. See: https://github.com/armed/gulp-flatten
// structure. See: https://github.com/armed/gulp-flatten
gulp.task('fonts', function() {
gulp.task('fonts', function() {
return gulp.src(globs.fonts)
return gulp.src(globs.fonts)
.pipe(flatten())
.pipe(flatten())
.pipe(gulp.dest(path.dist + 'fonts'))
.pipe(gulp.dest(path.dist + 'fonts'))
.pipe(browserSync.stream());
.pipe(browserSync.stream());
});
});
// ### Images
// ### Images
// `gulp images` - Run lossless compression on all the images.
// `gulp images` - Run lossless compression on all the images.
gulp.task('images', function() {
gulp.task('images', function() {
return gulp.src(globs.images)
return gulp.src(globs.images)
.pipe(imagemin({
.pipe(imagemin({
progressive: true,
progressive: true,
interlaced: true,
interlaced: true,
svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
}))
}))
.pipe(gulp.dest(path.dist + 'images'))
.pipe(gulp.dest(path.dist + 'images'))
.pipe(browserSync.stream());
.pipe(browserSync.stream());
});
});
// ### JSHint
// ### JSHint
// `gulp jshint` - Lints configuration JSON and project JS.
// `gulp jshint` - Lints configuration JSON and project JS.
gulp.task('jshint', function() {
gulp.task('jshint', function() {
return gulp.src([
return gulp.src([
'bower.json', 'gulpfile.js'
'bower.json', 'gulpfile.js'
].concat(project.js))
].concat(project.js))
.pipe(jshint())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('jshint-stylish'))
.pipe(gulpif(enabled.failJSHint, jshint.reporter('fail')));
.pipe(gulpif(enabled.failJSHint, jshint.reporter('fail')));
});
});
// ### Clean
// ### Clean
// `gulp clean` - Deletes the build folder entirely.
// `gulp clean` - Deletes the build folder entirely.
gulp.task('clean', require('del').bind(null, [path.dist]));
gulp.task('clean', require('del').bind(null, [path.dist]));
// ### Watch
// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. Specify the hostname of your dev server at
// changes across devices. Specify the hostname of your dev server at
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
// See: http://www.browsersync.io
gulp.task('watch', function() {
gulp.task('watch', function() {
browserSync.init({
browserSync.init({
files: ['{lib,templates}/**/*.php', '*.php'],
files: ['{lib,templates}/**/*.php', '*.php'],
proxy: config.devUrl,
proxy: config.devUrl,
snippetOptions: {
snippetOptions: {
whitelist: ['/wp-admin/admin-ajax.php'],
whitelist: ['/wp-admin/admin-ajax.php'],
blacklist: ['/wp-admin/**']
blacklist: ['/wp-admin/**']
}
}
});
});
gulp.watch([path.source + 'styles/**/*'], ['styles']);
gulp.watch([path.source + 'styles/**/*'], ['styles']);
gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
gulp.watch([path.source + 'images/**/*'], ['images']);
gulp.watch([path.source + 'images/**/*'], ['images']);
gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
});
});
// ### Build
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', function(callback) {
gulp.task('build', function(callback) {
runSequence('styles',
runSequence('styles',
'scripts',
'scripts',
['fonts', 'images'],
['fonts', 'images'],
callback);
callback);
});
});
// ### Wiredep
// ### Wiredep
// `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See
// `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See
// https://github.com/taptapship/wiredep
// https://github.com/taptapship/wiredep
gulp.task('wiredep', function() {
gulp.task('wiredep', function() {
var wiredep = require('wiredep').stream;
var wiredep = require('wiredep').stream;
return gulp.src(project.css)
return gulp.src(project.css)
.pipe(wiredep())
.pipe(wiredep())
.pipe(changed(path.source + 'styles', {
.pipe(changed(path.source + 'styles', {
hasChanged: changed.compareSha1Digest
hasChanged: changed.compareSha1Digest
}))
}))
.pipe(gulp.dest(path.source + 'styles'));
.pipe(gulp.dest(path.source + 'styles'));
});
});
// ### Gulp
// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
gulp.task('default', ['clean'], function() {
gulp.start('build');
gulp.start('build');
});
});