From 8fcf9f259a7a3f1448fa5538c41d0a2c3b5360da Mon Sep 17 00:00:00 2001 From: Michael Xander Date: Sun, 9 Apr 2017 10:45:50 +0200 Subject: [PATCH] Version 0.1.0: refactoring, less gulp wrappers more native tools - Refactored config.js and all gulp tasks to make them easier to understand and maintain - Switched to native tools: cssnano, uncss - Removed unused packages --- gulp/config.js | 181 +++++++++++------- gulp/tasks/development/base64.js | 4 +- gulp/tasks/development/browser-sync.js | 6 +- gulp/tasks/development/build.js | 15 +- gulp/tasks/development/copy-fonts.js | 4 +- gulp/tasks/development/delete.js | 6 +- gulp/tasks/development/images.js | 14 +- gulp/tasks/development/jekyll.js | 11 +- .../development/{jshint.js => lint-js.js} | 9 +- gulp/tasks/development/lint-styles.js | 22 ++- gulp/tasks/development/optimize-html.js | 7 +- gulp/tasks/development/responsive-images.js | 9 +- gulp/tasks/development/scripts-browserify.js | 4 +- gulp/tasks/development/scripts.js | 8 +- gulp/tasks/development/sprites.js | 4 +- gulp/tasks/development/styles.js | 43 +++-- gulp/tasks/development/watch.js | 12 +- gulp/tasks/production/browser-sync.js | 8 +- gulp/tasks/production/build.js | 16 +- gulp/tasks/production/copy-css.js | 10 +- gulp/tasks/production/copy-fonts.js | 4 +- gulp/tasks/production/gzip.js | 4 +- gulp/tasks/production/jekyll.js | 6 +- gulp/tasks/production/lint-json.js | 8 +- gulp/tasks/production/optimize-css.js | 24 ++- gulp/tasks/production/optimize-html.js | 7 +- gulp/tasks/production/optimize-images.js | 6 +- gulp/tasks/production/optimize-js.js | 6 +- gulp/tasks/production/optimize-json.js | 4 +- gulp/tasks/production/optimize-xml.js | 4 +- gulp/tasks/production/rev-collector.js | 8 +- gulp/tasks/production/revision.js | 4 +- gulp/tasks/production/rsync.js | 4 +- gulp/tasks/production/styles.js | 39 ++-- gulp/tasks/production/webp.js | 4 +- package.json | 19 +- 36 files changed, 342 insertions(+), 202 deletions(-) rename gulp/tasks/development/{jshint.js => lint-js.js} (61%) diff --git a/gulp/config.js b/gulp/config.js index 8e233f1..bcb9219 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -1,23 +1,32 @@ +// Paths +// // Jekyll wipes out all files on recreation. -// We don’t want to recreate all assets on every Jekyll build though. -// That’s why assets are served from a different folder on the development build. -// BrowserSync watches only the asset files. - +// We don’t want to recreate all assets on every Jekyll build +// though. That’s why assets are served from a different +// folder on the development build. BrowserSync watches only +// the asset files. var src = 'app'; var build = 'build'; -var development = 'build/development'; // holds the files created by Jekyll -var production = 'build/production'; -var srcAssets = 'app/_assets'; // links to source maps -var developmentAssets = 'build/assets'; // holds the assets for the dev build -var productionAssets = 'build/production/assets'; +var development = build + '/development'; +var production = build + '/production'; + +// Assets +var srcAssets = src + '/_assets'; +var developmentAssets = build + '/assets'; +var productionAssets = build + '/production/assets'; + module.exports = { + + // BrowserSync browsersync: { development: { server: { baseDir: [development, build, src] }, port: 9999, + // Watched files in the dev build. BS reloads + // website on change. files: [ developmentAssets + '/css/*.css', developmentAssets + '/js/*.js', @@ -34,9 +43,35 @@ module.exports = { notify: false } }, + + // Watch source files + watch: { + jekyll: [ + '_config.yml', + '_config.build.yml', + 'stopwords.txt', + src + '/_data/**/*.{json,yml,csv}', + src + '/_includes/**/*.{html,xml}', + src + '/_layouts/*.html', + src + '/_locales/*.yml', + src + '/_plugins/*.rb', + src + '/_posts/*.{markdown,md}', + src + '/**/*.{html,markdown,md,yml,json,txt,xml}', + src + '/*' + ], + styles: srcAssets + '/styles/**/*.css', + scripts: srcAssets + '/javascripts/**/*.js', + images: srcAssets + '/images/**/*', + sprites: srcAssets + '/images/**/*.png', + svg: srcAssets + '/images/**/*.svg', + }, + + // Delete all files from the dev build delete: { src: [developmentAssets] }, + + // Jekyll jekyll: { development: { src: src, @@ -50,6 +85,8 @@ module.exports = { config: '_config.yml,_config.build.yml' } }, + + // CSS styles: { src: srcAssets + '/styles/*.css', dest: developmentAssets + '/css', @@ -58,11 +95,7 @@ module.exports = { autoprefixer: { browsers: [ 'last 2 versions', - 'safari 5', - 'ie 8', 'ie 9', - 'opera 12.1', - 'ios 6', 'android 4' ], cascade: true @@ -70,6 +103,8 @@ module.exports = { mqpacker: { sort: true } } }, + + // Lint CSS files, but none in /vendor/ lintStyles: { src: [ srcAssets + '/styles/**/*.css', @@ -82,7 +117,8 @@ module.exports = { } } }, - // If Browserify is not used + + // JavaScript, if Browserify is not used scripts: { src: [ srcAssets + '/javascripts/**/*.js' @@ -93,6 +129,8 @@ module.exports = { // srcAssets + '/javascripts/example-vendor.js' ] }, + + // JavaScript Modules via Browserify browserify: { // Enable source maps debug: true, @@ -115,10 +153,13 @@ module.exports = { outputName: 'head.js' }] }, - images: { - src: srcAssets + '/images/**/*', - dest: developmentAssets + '/images' + + // Lint JavaScript files + lintJs: { + src: srcAssets + '/javascripts/*.js' }, + + // Responsive image generation responsiveImages: { src: srcAssets + '/images/example/*.jpg', dest: developmentAssets + '/images/example', @@ -131,6 +172,8 @@ module.exports = { sharpen: '2x0.5+0.5+0' } }, + + // WebP image generation webp: { src: productionAssets + '/images/**/*.{jpg,jpeg,png}', dest: productionAssets + '/images/', @@ -139,54 +182,9 @@ module.exports = { quality: 90 } }, - gzip: { - src: production + '/**/*.{html,xml,json,css,js}', - dest: production, - options: {} - }, - copyfonts: { - development: { - src: srcAssets + '/fonts/*', - dest: developmentAssets + '/fonts' - }, - production: { - src: developmentAssets + '/fonts/*', - dest: productionAssets + '/fonts' - } - }, - base64: { - src: developmentAssets + '/css/*.css', - dest: developmentAssets + '/css', - options: { - baseDir: build, - extensions: ['png'], - maxImageSize: 20 * 1024, // bytes - debug: false - } - }, - watch: { - jekyll: [ - '_config.yml', - '_config.build.yml', - 'stopwords.txt', - src + '/_data/**/*.{json,yml,csv}', - src + '/_includes/**/*.{html,xml}', - src + '/_layouts/*.html', - src + '/_locales/*.yml', - src + '/_plugins/*.rb', - src + '/_posts/*.{markdown,md}', - src + '/**/*.{html,markdown,md,yml,json,txt,xml}', - src + '/*' - ], - styles: srcAssets + '/styles/**/*.css', - scripts: srcAssets + '/javascripts/**/*.js', - images: srcAssets + '/images/**/*', - sprites: srcAssets + '/images/**/*.png', - svg: srcAssets + '/images/**/*.svg', - }, - jshint: { - src: srcAssets + '/javascripts/*.js' - }, + + // Sprites generation + // @TODO: Currently not used, might replace with gulp-svgstore! sprites: { src: srcAssets + '/images/sprites/icon/*.png', dest: { @@ -211,10 +209,46 @@ module.exports = { imgPath: '/assets/images/sprites/icon-sprite.png' } }, + + // Base64 + // @NOTE: Not used. + base64: { + src: developmentAssets + '/css/*.css', + dest: developmentAssets + '/css', + options: { + baseDir: build, + extensions: ['png'], + maxImageSize: 20 * 1024, // bytes + debug: false + } + }, + + // Copy images + images: { + src: srcAssets + '/images/**/*', + dest: developmentAssets + '/images' + }, + + // Copy fonts + copyfonts: { + development: { + src: srcAssets + '/fonts/*', + dest: developmentAssets + '/fonts' + }, + production: { + src: developmentAssets + '/fonts/*', + dest: productionAssets + '/fonts' + } + }, + + // Copy CSS + // Used to copy production ready styles. copycss: { src: developmentAssets + '/css/*.css', dest: productionAssets + '/css/' }, + + // Optimize CSS, JS, Images, HTML for production optimize: { css: { src: productionAssets + '/css/*.css', @@ -283,9 +317,13 @@ module.exports = { } } }, + + // Lint production JSON files lintJson: { src: production + '/**/*.json' }, + + // Revision asset files revision: { src: { assets: [ @@ -303,6 +341,8 @@ module.exports = { } } }, + + // Replace links to asset files, with rev version collect: { src: [ productionAssets + '/manifest.json', @@ -311,6 +351,16 @@ module.exports = { ], dest: production }, + + // GZIP compression + // @NOTE: Not used, done with s3_website. + gzip: { + src: production + '/**/*.{html,xml,json,css,js}', + dest: production, + options: {} + }, + + // rsync to staging server rsync: { src: production + '/**', options: { @@ -328,4 +378,5 @@ module.exports = { include: [] } } + }; diff --git a/gulp/tasks/development/base64.js b/gulp/tasks/development/base64.js index ab5acc9..a4a1dfa 100644 --- a/gulp/tasks/development/base64.js +++ b/gulp/tasks/development/base64.js @@ -1,6 +1,8 @@ +var config = require('../../config').base64; + var gulp = require('gulp'); var base64 = require('gulp-base64'); -var config = require('../../config').base64; + // Replace URLs in CSS files with base64 encoded data gulp.task('base64', ['styles'], function() { diff --git a/gulp/tasks/development/browser-sync.js b/gulp/tasks/development/browser-sync.js index 12fae82..c74384c 100644 --- a/gulp/tasks/development/browser-sync.js +++ b/gulp/tasks/development/browser-sync.js @@ -1,6 +1,8 @@ +var config = require('../../config').browsersync.development; + var gulp = require('gulp'); var browsersync = require('browser-sync'); -var config = require('../../config').browsersync.development; + // Run build task and start a server with BrowserSync gulp.task('browsersync', ['build'], function() { @@ -10,4 +12,4 @@ gulp.task('browsersync', ['build'], function() { // Reload task, that is used by jekyll-rebuild gulp.task('browsersync:reload', function() { browsersync.reload(); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/development/build.js b/gulp/tasks/development/build.js index 64a5b76..9229d22 100644 --- a/gulp/tasks/development/build.js +++ b/gulp/tasks/development/build.js @@ -1,6 +1,7 @@ var gulp = require('gulp'); var runSequence = require('run-sequence'); + // Run all tasks needed for a build, in defined order gulp.task('build', function(callback) { runSequence('delete', @@ -10,18 +11,18 @@ gulp.task('build', function(callback) { // If you don’t want to use Browserify, // replace 'scripts-browserify' with: - // 'scripts', - // 'scripts:standalones', + //'scripts', + //'scripts:standalones', 'scripts-browserify', 'images' - // 'responsive-images' - // 'copy:fonts' + //'responsive-images' + //'copy:fonts' ], - // 'base64', + //'base64', [ 'optimize:html' - // 'copy:fonts:production' + //'copy:fonts:production' ], callback); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/development/copy-fonts.js b/gulp/tasks/development/copy-fonts.js index c33af08..3ec877c 100644 --- a/gulp/tasks/development/copy-fonts.js +++ b/gulp/tasks/development/copy-fonts.js @@ -1,6 +1,8 @@ -var gulp = require('gulp'); var config = require('../../config').copyfonts.development; +var gulp = require('gulp'); + + // Copy fonts to build folder gulp.task('copy:fonts', function() { return gulp.src(config.src) diff --git a/gulp/tasks/development/delete.js b/gulp/tasks/development/delete.js index 5b950e1..189a15b 100644 --- a/gulp/tasks/development/delete.js +++ b/gulp/tasks/development/delete.js @@ -1,8 +1,10 @@ +var config = require('../../config').delete; + var gulp = require('gulp'); var del = require('del'); -var config = require('../../config').delete; -// Delete folders and files + +// Delete folders and files, for a clean build gulp.task('delete', function() { return del(config.src); }); diff --git a/gulp/tasks/development/images.js b/gulp/tasks/development/images.js index b59670c..9c09b9a 100644 --- a/gulp/tasks/development/images.js +++ b/gulp/tasks/development/images.js @@ -1,10 +1,16 @@ -var gulp = require('gulp'); -var changed = require('gulp-changed'); -var config = require('../../config').images; +var config = require('../../config').images; + +var gulp = require('gulp'); +var changed = require('gulp-changed'); + // Copy images to build folder gulp.task('images', function() { return gulp.src(config.src) - .pipe(changed(config.dest)) // Ignore unchanged files + + // Ignore unchanged files, so that not all images + // are being copied by the watch task. + .pipe(changed(config.dest)) + .pipe(gulp.dest(config.dest)); }); diff --git a/gulp/tasks/development/jekyll.js b/gulp/tasks/development/jekyll.js index ebd6f1a..3046771 100644 --- a/gulp/tasks/development/jekyll.js +++ b/gulp/tasks/development/jekyll.js @@ -1,10 +1,12 @@ +var config = require('../../config').jekyll.development; + var gulp = require('gulp'); var cp = require('child_process'); var browsersync = require('browser-sync'); var runSequence = require('run-sequence'); -var config = require('../../config').jekyll.development; -// Build the Jekyll site + +// Build Jekyll site gulp.task('jekyll', function(done) { browsersync.notify('Compiling Jekyll'); @@ -12,8 +14,7 @@ gulp.task('jekyll', function(done) { .on('close', done); }); -// Rebuild the Jekyll site, and optimize HTML -// to strip whitespaces (e.g. between
  • ). +// Rebuild Jekyll site gulp.task('jekyll-rebuild', function(callback) { runSequence('jekyll', 'optimize:html', 'browsersync:reload', callback); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/development/jshint.js b/gulp/tasks/development/lint-js.js similarity index 61% rename from gulp/tasks/development/jshint.js rename to gulp/tasks/development/lint-js.js index 5d42aef..79ba621 100644 --- a/gulp/tasks/development/jshint.js +++ b/gulp/tasks/development/lint-js.js @@ -1,10 +1,13 @@ +var config = require('../../config').lintJs; + var gulp = require('gulp'); var jshint = require('gulp-jshint'); var stylish = require('jshint-stylish'); -var config = require('../../config').jshint; -// Check JavaScript syntax -gulp.task('jshint', function() { + +// Lint JavaScript +// Executed by watch task +gulp.task('lint-js', function() { return gulp.src(config.src) .pipe(jshint()) .pipe(jshint.reporter(stylish)); diff --git a/gulp/tasks/development/lint-styles.js b/gulp/tasks/development/lint-styles.js index 32c9665..9824f2e 100644 --- a/gulp/tasks/development/lint-styles.js +++ b/gulp/tasks/development/lint-styles.js @@ -1,15 +1,21 @@ +var config = require('../../config').lintStyles; + var gulp = require('gulp'); var postcss = require('gulp-postcss'); var stylelint = require('stylelint'); var reporter = require('postcss-reporter'); -var config = require('../../config'); + // Lint styles // Executed in watch.js -gulp.task('lint-styles', function () { - return gulp.src(config.lintStyles.src) - .pipe(postcss([ - stylelint(config.lintStyles.options.stylelint), - reporter(config.lintStyles.options.reporter) - ])); -}); \ No newline at end of file +gulp.task('lint-styles', function() { + + // PostCSS plugins + var processors = [ + stylelint(config.options.stylelint), + reporter(config.options.reporter) + ]; + + return gulp.src(config.src) + .pipe(postcss(processors)); +}); diff --git a/gulp/tasks/development/optimize-html.js b/gulp/tasks/development/optimize-html.js index e93b5a4..362342a 100644 --- a/gulp/tasks/development/optimize-html.js +++ b/gulp/tasks/development/optimize-html.js @@ -1,8 +1,11 @@ +var config = require('../../config').optimize.html.development; + var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); -var config = require('../../config').optimize.html.development; -// Minimize HTML + +// Minimize and optimize HTML, +// to strip whitespace (e.g. between
  • ). gulp.task('optimize:html', function() { return gulp.src(config.src) .pipe(htmlmin(config.options)) diff --git a/gulp/tasks/development/responsive-images.js b/gulp/tasks/development/responsive-images.js index 0c0dc65..14007c6 100644 --- a/gulp/tasks/development/responsive-images.js +++ b/gulp/tasks/development/responsive-images.js @@ -1,13 +1,18 @@ +var config = require('../../config').responsiveImages; + var gulp = require('gulp'); var imageResize = require('gulp-image-resize'); var rename = require('gulp-rename'); var changed = require('gulp-changed'); -var config = require('../../config').responsiveImages; + // Create responsive images gulp.task('responsive-images', function() { return gulp.src(config.src) - .pipe(changed(config.dest)) // Ignore unchanged files + + // Ignore unchanged files + .pipe(changed(config.dest)) + .pipe(imageResize(config.options)) .pipe(rename(function (path) { path.basename += config.outputSuffix; })) .pipe(gulp.dest(config.dest)); diff --git a/gulp/tasks/development/scripts-browserify.js b/gulp/tasks/development/scripts-browserify.js index 1db88ce..900fe47 100644 --- a/gulp/tasks/development/scripts-browserify.js +++ b/gulp/tasks/development/scripts-browserify.js @@ -1,3 +1,5 @@ +var config = require('../../config').browserify; + var gulp = require('gulp'); var browsersync = require('browser-sync'); var browserify = require('browserify'); @@ -5,7 +7,7 @@ var source = require('vinyl-source-stream'); var watchify = require('watchify'); var bundleLogger = require('../../util/bundleLogger'); var handleErrors = require('../../util/handleErrors'); -var config = require('../../config').browserify; + // Run JavaScript through Browserify gulp.task('scripts-browserify', function(callback) { diff --git a/gulp/tasks/development/scripts.js b/gulp/tasks/development/scripts.js index 9a98ecb..64cefb1 100644 --- a/gulp/tasks/development/scripts.js +++ b/gulp/tasks/development/scripts.js @@ -1,9 +1,11 @@ +var config = require('../../config').scripts; + var gulp = require('gulp'); var concat = require('gulp-concat'); var sourcemaps = require('gulp-sourcemaps'); -var config = require('../../config').scripts; -// Concat JavaScript files + +// Concat JavaScript files, // and create sourcemaps gulp.task('scripts', function() { return gulp.src(config.src) @@ -19,4 +21,4 @@ gulp.task('scripts:standalones', function() { .pipe(sourcemaps.init()) .pipe(sourcemaps.write()) .pipe(gulp.dest(config.dest)); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/development/sprites.js b/gulp/tasks/development/sprites.js index cb2bb87..9c753b1 100644 --- a/gulp/tasks/development/sprites.js +++ b/gulp/tasks/development/sprites.js @@ -1,6 +1,8 @@ +var config = require('../../config').sprites; + var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); -var config = require('../../config').sprites; + // Generate sprite and CSS file, from PNGs gulp.task('sprites', function() { diff --git a/gulp/tasks/development/styles.js b/gulp/tasks/development/styles.js index 833cc34..21cf397 100644 --- a/gulp/tasks/development/styles.js +++ b/gulp/tasks/development/styles.js @@ -1,14 +1,15 @@ -var gulp = require('gulp'); -var postcss = require('gulp-postcss'); -var precss = require('precss'); -var nano = require('gulp-cssnano'); -var plumber = require('gulp-plumber'); -var sourcemaps = require('gulp-sourcemaps'); -var gutil = require('gulp-util'); -var browsersync = require('browser-sync'); -var autoprefixer = require('autoprefixer'); -var mqpacker = require('css-mqpacker'); -var config = require('../../config').styles; +var config = require('../../config').styles; + +var gulp = require('gulp'); +var postcss = require('gulp-postcss'); +var precss = require('precss'); +var autoprefixer = require('autoprefixer'); +var mqpacker = require('css-mqpacker'); +var cssnano = require('cssnano'); +var plumber = require('gulp-plumber'); +var sourcemaps = require('gulp-sourcemaps'); +var gutil = require('gulp-util'); +var browsersync = require('browser-sync'); function onError (err) { gutil.beep(); @@ -16,24 +17,26 @@ function onError (err) { this.emit('end'); } + // Run CSS through PostCSS and it’s plugins. // Build sourcemaps and minimize. -var processors = [ - precss(config.options.precss), - autoprefixer(config.options.autoprefixer), - mqpacker(config.options.mqpacker) -]; - -gulp.task('styles', function () { +gulp.task('styles', function() { browsersync.notify('Transforming CSS with PostCSS'); + // PostCSS plugins + var processors = [ + precss(config.options.precss), + autoprefixer(config.options.autoprefixer), + mqpacker(config.options.mqpacker), + cssnano() + ]; + return gulp.src(config.src) .pipe(plumber({ errorHandler: onError })) .pipe(sourcemaps.init()) .pipe(postcss(processors)) - .pipe(nano()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(config.dest)); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/development/watch.js b/gulp/tasks/development/watch.js index 3b3c418..daa46a8 100644 --- a/gulp/tasks/development/watch.js +++ b/gulp/tasks/development/watch.js @@ -1,12 +1,16 @@ -var gulp = require('gulp'); var config = require('../../config').watch; -// Start BrowserSync task and watch files for changes +var gulp = require('gulp'); + + +// Start BrowserSync task, +// watch files for changes, +// and run defined task(s) on file change. gulp.task('watch', ['browsersync'], function() { gulp.watch(config.jekyll, ['jekyll-rebuild']); gulp.watch(config.styles, ['styles', 'lint-styles']); - gulp.watch(config.scripts, ['scripts-browserify', 'jshint']); + gulp.watch(config.scripts, ['scripts-browserify', 'lintJs']); gulp.watch(config.images, ['images']); //gulp.watch(config.svg, ['copy:fonts']); //gulp.watch(config.sprites, ['sprites']); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/production/browser-sync.js b/gulp/tasks/production/browser-sync.js index 26fdac2..4771c90 100644 --- a/gulp/tasks/production/browser-sync.js +++ b/gulp/tasks/production/browser-sync.js @@ -1,8 +1,10 @@ +var config = require('../../config').browsersync.production; + var gulp = require('gulp'); var browsersync = require('browser-sync'); -var config = require('../../config').browsersync.production; -// Start a server and watch changes with BrowserSync + +// Run production build task and start a server with BrowserSync gulp.task('browsersync:production', ['build:production'], function() { browsersync(config); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/production/build.js b/gulp/tasks/production/build.js index 540ae68..38cebcd 100644 --- a/gulp/tasks/production/build.js +++ b/gulp/tasks/production/build.js @@ -1,12 +1,13 @@ var gulp = require('gulp'); var runSequence = require('run-sequence'); + // Run all tasks needed for a build, in defined order gulp.task('build:production', function(callback) { runSequence('delete', 'jekyll:production', [ // Use just 'styles', when CSS sourcemaps - // are needed. + // are needed on production build. 'styles:production', // If you don’t want to use Browserify, @@ -17,9 +18,9 @@ gulp.task('build:production', function(callback) { 'images', 'responsive-images' - // 'copy:fonts' + //'copy:fonts' ], - // 'base64', + //'base64', [ 'copy:css', 'optimize:js', @@ -27,10 +28,11 @@ gulp.task('build:production', function(callback) { 'optimize:xml', 'optimize:images', 'optimize:html:production' - // 'copy:fonts:production' + //'copy:fonts:production' ], - // CSS after optimize:html, so that all files exist - // for Phantom.JS + + // After optimize:html, so that all files exist + // for Phantom.JS (UnCSS) [ 'optimize:css', 'lint-json' @@ -42,4 +44,4 @@ gulp.task('build:production', function(callback) { // 'gzip' // ], callback); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/production/copy-css.js b/gulp/tasks/production/copy-css.js index 32d4eaa..39596c8 100644 --- a/gulp/tasks/production/copy-css.js +++ b/gulp/tasks/production/copy-css.js @@ -1,8 +1,10 @@ -var gulp = require('gulp'); -var size = require('gulp-size'); -var config = require('../../config').copycss; +var config = require('../../config').copycss; -// Copy CSS files +var gulp = require('gulp'); +var size = require('gulp-size'); + + +// Copy CSS files to build folder gulp.task('copy:css', function() { return gulp.src(config.src) .pipe(gulp.dest(config.dest)) diff --git a/gulp/tasks/production/copy-fonts.js b/gulp/tasks/production/copy-fonts.js index 416ed8f..dbec784 100644 --- a/gulp/tasks/production/copy-fonts.js +++ b/gulp/tasks/production/copy-fonts.js @@ -1,6 +1,8 @@ -var gulp = require('gulp'); var config = require('../../config').copyfonts.production; +var gulp = require('gulp'); + + // Copy fonts to build folder gulp.task('copy:fonts:production', function() { return gulp.src(config.src) diff --git a/gulp/tasks/production/gzip.js b/gulp/tasks/production/gzip.js index 451bc64..4366e66 100644 --- a/gulp/tasks/production/gzip.js +++ b/gulp/tasks/production/gzip.js @@ -1,6 +1,8 @@ +var config = require('../../config').gzip; + var gulp = require('gulp'); var gzip = require('gulp-gzip'); -var config = require('../../config').gzip; + // Gzip files gulp.task('gzip', function() { diff --git a/gulp/tasks/production/jekyll.js b/gulp/tasks/production/jekyll.js index 9cc93aa..eb45ede 100644 --- a/gulp/tasks/production/jekyll.js +++ b/gulp/tasks/production/jekyll.js @@ -1,9 +1,11 @@ +var config = require('../../config').jekyll.production; + var gulp = require('gulp'); var cp = require('child_process'); var browsersync = require('browser-sync'); -var config = require('../../config').jekyll.production; -// Build the Jekyll site + +// Build Jekyll site gulp.task('jekyll:production', function(done) { browsersync.notify('Compiling Jekyll (Production)'); diff --git a/gulp/tasks/production/lint-json.js b/gulp/tasks/production/lint-json.js index 0a807de..2b1b6c6 100644 --- a/gulp/tasks/production/lint-json.js +++ b/gulp/tasks/production/lint-json.js @@ -1,6 +1,8 @@ -var gulp = require('gulp'); -var jsonlint = require('gulp-jsonlint'); -var config = require('../../config').lintJson; +var config = require('../../config').lintJson; + +var gulp = require('gulp'); +var jsonlint = require('gulp-jsonlint'); + // Lint optimized JSON files gulp.task('lint-json', function() { diff --git a/gulp/tasks/production/optimize-css.js b/gulp/tasks/production/optimize-css.js index 7850578..2791c63 100644 --- a/gulp/tasks/production/optimize-css.js +++ b/gulp/tasks/production/optimize-css.js @@ -1,14 +1,22 @@ -var gulp = require('gulp'); -var size = require('gulp-size'); -var uncss = require('gulp-uncss'); -var nano = require('gulp-cssnano'); -var config = require('../../config').optimize.css; +var config = require('../../config').optimize.css; -// Optimize CSS files +var gulp = require('gulp'); +var size = require('gulp-size'); +var postcss = require('gulp-postcss'); +var uncss = require('postcss-uncss'); +var cssnano = require('cssnano'); + + +// Optimize CSS files with UnCSS gulp.task('optimize:css', function() { + + var processors = [ + uncss(config.options.uncss), + cssnano() + ]; + return gulp.src(config.src) - .pipe(uncss(config.options.uncss)) - .pipe(nano()) + .pipe(postcss(processors)) .pipe(gulp.dest(config.dest)) .pipe(size()); }); diff --git a/gulp/tasks/production/optimize-html.js b/gulp/tasks/production/optimize-html.js index c975611..72cd414 100644 --- a/gulp/tasks/production/optimize-html.js +++ b/gulp/tasks/production/optimize-html.js @@ -1,8 +1,11 @@ +var config = require('../../config').optimize.html.production; + var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); -var config = require('../../config').optimize.html.production; -// Minimize HTML + +// Minimize and optimize HTML, +// to strip whitespace (e.g. between
  • ). gulp.task('optimize:html:production', function() { return gulp.src(config.src) .pipe(htmlmin(config.options)) diff --git a/gulp/tasks/production/optimize-images.js b/gulp/tasks/production/optimize-images.js index b7e0631..ccbbfac 100644 --- a/gulp/tasks/production/optimize-images.js +++ b/gulp/tasks/production/optimize-images.js @@ -1,7 +1,9 @@ +var config = require('../../config').optimize.images; + var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var size = require('gulp-size'); -var config = require('../../config').optimize.images; + // Copy and minimize images gulp.task('optimize:images', function() { @@ -16,4 +18,4 @@ gulp.task('optimize:images', function() { ) .pipe(gulp.dest(config.dest)) .pipe(size()); -}); \ No newline at end of file +}); diff --git a/gulp/tasks/production/optimize-js.js b/gulp/tasks/production/optimize-js.js index ea58646..96e8d93 100644 --- a/gulp/tasks/production/optimize-js.js +++ b/gulp/tasks/production/optimize-js.js @@ -1,9 +1,11 @@ +var config = require('../../config').optimize.js; + var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size = require('gulp-size'); -var config = require('../../config').optimize.js; -// Copy and minimize JS files + +// Copy and minimize JavaScript files gulp.task('optimize:js', function() { return gulp.src(config.src) .pipe(uglify(config.options)) diff --git a/gulp/tasks/production/optimize-json.js b/gulp/tasks/production/optimize-json.js index bbf043b..a21e1ea 100644 --- a/gulp/tasks/production/optimize-json.js +++ b/gulp/tasks/production/optimize-json.js @@ -1,7 +1,9 @@ +var config = require('../../config').optimize.json; + var gulp = require('gulp'); var jsonminify = require('gulp-jsonminify'); var size = require('gulp-size'); -var config = require('../../config').optimize.json; + // Copy and minimize JSON files gulp.task('optimize:json', function() { diff --git a/gulp/tasks/production/optimize-xml.js b/gulp/tasks/production/optimize-xml.js index 74c4955..5403b3a 100644 --- a/gulp/tasks/production/optimize-xml.js +++ b/gulp/tasks/production/optimize-xml.js @@ -1,7 +1,9 @@ +var config = require('../../config').optimize.xml; + var gulp = require('gulp'); var prettydata = require('gulp-pretty-data'); var size = require('gulp-size'); -var config = require('../../config').optimize.xml; + // Copy and minimize XML files gulp.task('optimize:xml', function() { diff --git a/gulp/tasks/production/rev-collector.js b/gulp/tasks/production/rev-collector.js index 100207b..5ef57df 100644 --- a/gulp/tasks/production/rev-collector.js +++ b/gulp/tasks/production/rev-collector.js @@ -1,10 +1,12 @@ +var config = require('../../config').collect; + var gulp = require('gulp'); var collect = require('gulp-rev-collector'); -var config = require('../../config').collect; + // Replace all links to asset files via a manifest file gulp.task('rev:collect', function() { return gulp.src(config.src) - .pipe(collect()) - .pipe(gulp.dest(config.dest)); + .pipe(collect()) + .pipe(gulp.dest(config.dest)); }); diff --git a/gulp/tasks/production/revision.js b/gulp/tasks/production/revision.js index 54eb693..920e78b 100644 --- a/gulp/tasks/production/revision.js +++ b/gulp/tasks/production/revision.js @@ -1,6 +1,8 @@ +var config = require('../../config').revision; + var gulp = require('gulp'); var rev = require('gulp-rev'); -var config = require('../../config').revision; + // Revision all asset files and write a manifest file gulp.task('revision', function() { diff --git a/gulp/tasks/production/rsync.js b/gulp/tasks/production/rsync.js index e2ff7b0..f0a357a 100644 --- a/gulp/tasks/production/rsync.js +++ b/gulp/tasks/production/rsync.js @@ -1,6 +1,8 @@ +var config = require('../../config').rsync; + var gulp = require('gulp'); var rsync = require('gulp-rsync'); -var config = require('../../config').rsync; + // Copy files and folder (via rsync) to server gulp.task('rsync', function() { diff --git a/gulp/tasks/production/styles.js b/gulp/tasks/production/styles.js index de714ba..82bb07a 100644 --- a/gulp/tasks/production/styles.js +++ b/gulp/tasks/production/styles.js @@ -1,13 +1,14 @@ -var gulp = require('gulp'); -var postcss = require('gulp-postcss'); -var precss = require('precss'); -var nano = require('gulp-cssnano'); -var plumber = require('gulp-plumber'); -var gutil = require('gulp-util'); -var browsersync = require('browser-sync'); -var autoprefixer = require('autoprefixer'); -var mqpacker = require('css-mqpacker'); -var config = require('../../config').styles; +var config = require('../../config').styles; + +var gulp = require('gulp'); +var postcss = require('gulp-postcss'); +var precss = require('precss'); +var autoprefixer = require('autoprefixer'); +var mqpacker = require('css-mqpacker'); +var cssnano = require('cssnano'); +var plumber = require('gulp-plumber'); +var gutil = require('gulp-util'); +var browsersync = require('browser-sync'); function onError (err) { gutil.beep(); @@ -15,25 +16,27 @@ function onError (err) { this.emit('end'); } + // Run CSS through PostCSS and it’s plugins. // // No sourcemaps for production. // Switch to 'styles' task when they are needed // to debug on production. -var processors = [ - precss(config.options.precss), - autoprefixer(config.options.autoprefixer), - mqpacker(config.options.mqpacker) -]; - -gulp.task('styles:production', function () { +gulp.task('styles:production', function() { browsersync.notify('Transforming CSS with PostCSS'); + // PostCSS plugins + var processors = [ + precss(config.options.precss), + autoprefixer(config.options.autoprefixer), + mqpacker(config.options.mqpacker), + cssnano() + ]; + return gulp.src(config.src) .pipe(plumber({ errorHandler: onError })) .pipe(postcss(processors)) - .pipe(nano()) .pipe(gulp.dest(config.dest)); }); \ No newline at end of file diff --git a/gulp/tasks/production/webp.js b/gulp/tasks/production/webp.js index 7675169..6900850 100644 --- a/gulp/tasks/production/webp.js +++ b/gulp/tasks/production/webp.js @@ -1,6 +1,8 @@ +var config = require('../../config').webp; + var gulp = require('gulp'); var webp = require('gulp-webp'); -var config = require('../../config').webp; + // Generate WebP image versions gulp.task('webp', function() { diff --git a/package.json b/package.json index dc2ed53..baa482e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gulp-jekyll", - "version": "0.0.4", + "version": "0.1.0", "description": "The build process for gulp-jekyll", "author": "Michael Xander", "repository": "michaelx/gulp-jekyll", @@ -21,15 +21,14 @@ "browserify": "^13.3.0", "browserify-shim": "^3.8.14", "css-mqpacker": "^5.0.1", + "cssnano": "^3.10.0", "del": "^2.2.2", "gulp": "^3.9.1", "gulp-base64": "^0.1.3", "gulp-changed": "^2.0.0", - "gulp-concat": "^2.6.0", - "gulp-cssnano": "^2.1.2", - "gulp-filter": "^3.0.1", + "gulp-concat": "^2.6.1", "gulp-gzip": "^1.4.0", - "gulp-htmlmin": "^2.0.0", + "gulp-htmlmin": "^3.0.0", "gulp-image-resize": "^0.12.0", "gulp-imagemin": "^3.2.0", "gulp-jshint": "^2.0.4", @@ -41,25 +40,25 @@ "gulp-pretty-data": "^0.2.0", "gulp-rename": "^1.2.2", "gulp-rev": "^7.1.2", - "gulp-rev-collector": "^1.0.4", + "gulp-rev-collector": "^1.1.1", "gulp-rsync": "0.0.7", - "gulp-shell": "^0.5.2", "gulp-size": "^2.1.0", "gulp-sourcemaps": "^2.5.0", "gulp-uglify": "^2.1.2", - "gulp-uncss": "^1.0.6", "gulp-util": "^3.0.8", "gulp-webp": "^2.3.0", "gulp.spritesmith": "^6.4.0", "jshint-stylish": "^2.2.1", "postcss-reporter": "^3.0.0", + "postcss-uncss": "^0.14.0", "precss": "^1.4.0", "pretty-hrtime": "^1.0.3", "require-dir": "^0.3.1", - "run-sequence": "^1.2.1", + "run-sequence": "^1.2.2", "stylelint": "^7.9.0", "stylelint-order": "^0.4.3", + "uncss": "^0.14.1", "vinyl-source-stream": "^1.1.0", - "watchify": "^3.7.0" + "watchify": "^3.9.0" } }