Build improvements (#108)

* ES6 all the gulp things
* inline critical-path CSS
* bump required node version
* revision assets in staging build too
* update imagemin syntax
* fix sourcemaps being written into production assets

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

gulpfile.babel.js

@@ -3,13 +3,13 @@
 // load plugins
 const $ = require('gulp-load-plugins')()
 
-// manually require modules that won"t get picked up by gulp-load-plugins
+// manually import modules that won't get picked up by gulp-load-plugins
-const gulp = require('gulp'),
+import { src, dest, watch, parallel, series } from 'gulp'
-      del = require('del'),
+import del from 'del'
-      pkg = require('./package.json'),
+import pkg from './package.json'
-      parallelize = require('concurrent-transform'),
+import parallelize from 'concurrent-transform'
-      browser = require('browser-sync').create(),
+import browser from 'browser-sync'
-      spawn = require('child_process').spawn
+import critical from 'critical'
 
 // handle errors
 const onError = (error) => {
@@ -73,71 +73,34 @@ const SPRITECONFIG = {
 // code banner
 const BANNER = [
     '/**',
-    ' ** <%= pkg.name %> v<%= pkg.version %>',
+    ' ** <%= pkg.name %>',
     ' ** <%= pkg.description %>',
     ' ** <%= pkg.homepage %>',
     ' **',
     ' ** <%= pkg.author.name %> <<%= pkg.author.email %>>',
-    ' **',
-    ' ** ',
-    ' ** <%= pkg.repository.url %> ',
     ' **/',
     ''
 ].join('\n')
 
 
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-// gulp tasks
+// Tasks
-// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-//
-// Full build
-//
-// `gulp build` is the development build
-// `gulp build --production` is the production build
-//
-gulp.task('build', gulp.series(
-    buildBanner, clean, jekyll,
-    gulp.parallel(html, css, js, images, fonts, videos, svg),
-    rev, revReplace
-))
-
-function buildBanner(done) {
-    console.log($.util.colors.gray("         ------------------------------------------"))
-    console.log($.util.colors.green('                Building ' + ($.util.env.production ? 'production' : $.util.env.staging ? 'staging' : 'dev') + ' version...'))
-    console.log($.util.colors.gray("         ------------------------------------------"))
-
-    done()
-}
-
-
-//
-// Build site, run server, and watch for file changes
-//
-gulp.task('default', gulp.series('build', server, watch))
-
-
-// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-// Functions
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 //
 // Delete build artifacts
 //
-function clean(done) {
+export const clean = () =>
-    return del([
+    del([
         DIST + '**/*',
         DIST + '.*' // delete all hidden files
     ])
 
-    done()
-}
-
 
 //
 // Jekyll
 //
-function jekyll(done) {
+export const jekyll = (done) => {
 
     browser.notify('Compiling Jekyll')
 
@@ -152,19 +115,17 @@ function jekyll(done) {
         var jekyll_options = 'jekyll build --incremental --drafts --future'
     }
 
-    const jekyll = spawn('bundle', ['exec', jekyll_options], { stdio: 'inherit' })
+    let spawn  = require('child_process').spawn,
+        jekyll = spawn('bundle', ['exec', jekyll_options], { stdio: 'inherit' })
 
-    return jekyll
+    jekyll.on('error', (error) => onError() ).on('close', done)
-        .on('error', (error) => onError() )
+}
-        .on('close', done)
-};
 
 
 //
 // HTML
 //
-function html() {
+export const html = () => src(DIST + '**/*.html')
-    return gulp.src(DIST + '/**/*.html')
     .pipe($.if(isProduction || isStaging, $.htmlmin({
         collapseWhitespace: true,
         conservativeCollapse: true,
@@ -176,157 +137,214 @@ function html() {
         minifyJS: true,
         minifyCSS: true
     })))
-        .pipe(gulp.dest(DIST))
+    .pipe(dest(DIST))
-};
 
 
 //
 // Styles
 //
-function css() {
+export const css = () => src(SRC + '_assets/styles/bigchain.scss')
-    return gulp.src(SRC + '_assets/styles/bigchain.scss')
+    .pipe($.if(!(isProduction || isStaging), $.sourcemaps.init()))
-        .pipe($.sourcemaps.init())
     .pipe($.sass().on('error', $.sass.logError))
     .pipe($.autoprefixer({ browsers: COMPATIBILITY }))
     .pipe($.if(isProduction || isStaging, $.cleanCss()))
-        .pipe($.if(!isProduction, $.sourcemaps.write()))
+    .pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
     .pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))
     .pipe($.rename({ suffix: '.min' }))
-        .pipe(gulp.dest(DIST + 'assets/css/'))
+    .pipe(dest(DIST + 'assets/css/'))
     .pipe(browser.stream())
-};
+
+// inline critical-path CSS
+export const criticalCss = (done) => {
+    if (isProduction || isStaging) {
+        critical.generate({
+            base: DIST,
+            src: 'index.html',
+            dest: 'index.html',
+            inline: true,
+            minify: true,
+            dimensions: [{
+                height: 320,
+                width: 640
+            }, {
+                height: 600,
+                width: 800
+            }, {
+                height: 900,
+                width: 1360
+            }]
+        })
+    }
+    done()
+}
 
 
 //
 // JavaScript
 //
-function js() {
+const js = () =>
-    return gulp.src([
+    src([
         SRC + '_assets/javascripts/bigchain.js',
         SRC + '_assets/javascripts/page-*.js'
     ])
-    .pipe($.sourcemaps.init())
+    .pipe($.if(!(isProduction || isStaging), $.sourcemaps.init()))
-    .pipe($.include())
+    .pipe($.include()).on('error', onError)
     .pipe($.if(isProduction || isStaging, $.uglify())).on('error', onError)
-    .pipe($.if(!isProduction || !isStaging, $.sourcemaps.write()))
+    .pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
     .pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))
     .pipe($.rename({suffix: '.min'}))
-    .pipe(gulp.dest(DIST + 'assets/js/'))
+    .pipe(dest(DIST + 'assets/js/'))
-};
 
 
 //
 // SVG sprite
 //
-function svg() {
+export const svg = () => src(SRC + '_assets/images/**/*.svg')
-    return gulp.src(SRC + '_assets/images/**/*.svg')
     .pipe($.if(isProduction || isStaging, $.imagemin({
-            svgoPlugins: [{
+        svgoPlugins: [{ removeRasterImages: true }]
-                removeRasterImages: true
-            }]
     })))
     .pipe($.svgSprite(SPRITECONFIG))
-        .pipe(gulp.dest(DIST + 'assets/img/'))
+    .pipe(dest(DIST + 'assets/img/'))
-}
 
 
 //
 // Copy Images
 //
-function images() {
+export const images = () => src(SRC + '_assets/images/**/*')
-    return gulp.src(SRC + '_assets/images/**/*')
+    .pipe($.if(isProduction || isStaging, $.imagemin([
-        .pipe($.if(isProduction || isStaging, $.imagemin({
+    	$.imagemin.gifsicle({ interlaced: true }),
-            optimizationLevel: 3, // png
+    	$.imagemin.jpegtran({ progressive: true }),
-            progressive: true, // jpg
+    	$.imagemin.optipng({ optimizationLevel: 5 }),
-            interlaced: true, // gif
+    	$.imagemin.svgo({plugins: [{ removeViewBox: true }]})
-            multipass: true, // svg
+    ])))
-            svgoPlugins: [{ removeViewBox: false }]
+    .pipe(dest(DIST + 'assets/img/'))
-        })))
-        .pipe(gulp.dest(DIST + 'assets/img/'))
-}
 
 
 //
 // Copy Fonts
 //
-function fonts() {
+export const fonts = () => src(SRC + '_assets/fonts/**/*')
-    return gulp.src(SRC + '_assets/fonts/**/*')
     .pipe($.rename({dirname: ''}))
-        .pipe(gulp.dest(DIST + 'assets/fonts/'))
+    .pipe(dest(DIST + 'assets/fonts/'))
-}
 
 
 //
 // Copy Videos
 //
-function videos() {
+export const videos = () => src(SRC + '_assets/videos/**/*')
-    return gulp.src(SRC + '_assets/videos/**/*')
+    .pipe(dest(DIST + 'assets/videos/'))
-        .pipe(gulp.dest(DIST + 'assets/videos/'))
+
-}
 
 //
 // Revision static assets
 //
-function rev(done) {
+export const rev = (done) => {
     // globbing is slow so do everything conditionally for faster dev build
     if (isProduction || isStaging) {
-        return gulp.src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}')
+        return src(DIST + 'assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}')
             .pipe($.rev())
-            .pipe(gulp.dest(DIST + '/assets/'))
+            .pipe(dest(DIST + 'assets/'))
             // output rev manifest for next replace task
             .pipe($.rev.manifest())
-            .pipe(gulp.dest(DIST + '/assets/'))
+            .pipe(dest(DIST + 'assets/'))
     }
-
     done()
-};
+}
 
 
 //
 // Replace all links to assets in files
 // from a manifest file
 //
-function revReplace(done) {
+export const revReplace = (done) => {
     // globbing is slow so do everything conditionally for faster dev build
     if (isProduction || isStaging) {
-        var manifest = gulp.src(DIST + '/assets/rev-manifest.json');
+        let manifest = src(DIST + 'assets/rev-manifest.json')
 
-        return gulp.src(DIST + '/**/*.{html,xml,txt,json,css,js}')
+        return src(DIST + '**/*.{html,css,js}')
             .pipe($.revReplace({ manifest: manifest }))
-            .pipe(gulp.dest(DIST))
+            .pipe(dest(DIST))
     }
-
     done()
-};
+}
 
 
 //
 // Dev Server
 //
-function server(done) {
+export const server = (done) => {
     browser.init({
         server: DIST,
         port: PORT,
         reloadDebounce: 2000
     })
-
     done()
-};
+}
 
 
 //
 // Watch for file changes
 //
-function watch() {
+export const watchSrc = () => {
-    gulp.watch(SRC + '_assets/styles/**/*.scss').on('all', gulp.series(css))
+    watch(SRC + '_assets/styles/**/*.scss').on('all', series(css))
-    gulp.watch(SRC + '_assets/javascripts/**/*.js').on('all', gulp.series(js, browser.reload))
+    watch(SRC + '_assets/javascripts/**/*.js').on('all', series(js, browser.reload))
-    gulp.watch(SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}').on('all', gulp.series(images, browser.reload))
+    watch(SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}').on('all', series(images, browser.reload))
-    gulp.watch(SRC + '_assets/images/**/*.{svg}').on('all', gulp.series(svg, browser.reload))
+    watch(SRC + '_assets/images/**/*.{svg}').on('all', series(svg, browser.reload))
-    gulp.watch(SRC + '_assets/videos/**/*.{mp4,webm}').on('all', gulp.series(videos, browser.reload))
+    watch(SRC + '_assets/videos/**/*.{mp4,webm}').on('all', series(videos, browser.reload))
-    gulp.watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './_config.yml', SRC + '_includes/svg/*']).on('all', gulp.series('build', browser.reload))
+    watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './*.yml', SRC + '_includes/svg/*']).on('all', series('build', browser.reload))
 }
 
 
+//
+// Build banner
+//
+const buildBanner = (done) => {
+    console.log($.util.colors.gray("         ------------------------------------------"))
+    console.log($.util.colors.green('                Building ' + ($.util.env.production ? 'production' : $.util.env.staging ? 'staging' : 'dev') + ' version...'))
+    console.log($.util.colors.gray("         ------------------------------------------"))
+
+    done()
+}
+
+
+//
+// Deploy banner
+//
+const deployBanner = (done) => {
+    if (($.util.env.live || $.util.env.beta || $.util.env.gamma) === true ) {
+        console.log($.util.colors.gray("        ------------------------------------------"))
+        console.log($.util.colors.green('                    Deploying to ' + ($.util.env.live ? 'Live' : $.util.env.beta ? 'Beta' : 'Gamma') + '... '))
+        console.log($.util.colors.gray("        ------------------------------------------"))
+    } else {
+        console.log($.util.colors.red('\nHold your horses! You need to specify a deployment target like so: gulp deploy --beta. Possible targets are: --live, --beta, --gamma\n'))
+    }
+    done()
+}
+
+
+// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+// Collection tasks
+// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+//
+// Full build
+//
+// `gulp build` is the development build
+// `gulp build --production` is the production build
+//
+export const build = series(buildBanner, clean, jekyll, parallel(html, css, js, images, fonts, videos, svg), rev, revReplace, criticalCss)
+
+//
+// Build site, run server, and watch for file changes
+//
+// `gulp dev`
+//
+export const dev = series(build, server, watchSrc)
+
+// Set `gulp dev` as default: `gulp`
+export default dev
+
+
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 // Deployment
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -336,45 +354,35 @@ function watch() {
 // gulp deploy --beta
 // gulp deploy --gamma
 //
-gulp.task('deploy', (done) => {
+export const s3 = () => {
-
-    if (($.util.env.live || $.util.env.beta || $.util.env.gamma) === true ) {
-        console.log($.util.colors.gray("        ------------------------------------------"))
-        console.log($.util.colors.green('                    Deploying to ' + ($.util.env.live ? 'Live' : $.util.env.beta ? 'Beta' : 'Gamma') + '... '))
-        console.log($.util.colors.gray("        ------------------------------------------"))
-    } else {
-        console.log($.util.colors.red('\nHold your horses! You need to specify a deployment target like so: gulp deploy --beta. Possible targets are: --live, --beta, --gamma\n'))
-
-        done()
-
-        return
-    }
 
     // create publisher, define config
     if ($.util.env.live === true) {
         var publisher = $.awspublish.create({
-                params: { "Bucket": S3BUCKET },
+            params: { 'Bucket': S3BUCKET },
-                "accessKeyId": process.env.AWS_ACCESS_KEY,
+            'accessKeyId': process.env.AWS_ACCESS_KEY,
-                "secretAccessKey": process.env.AWS_SECRET_KEY,
+            'secretAccessKey': process.env.AWS_SECRET_KEY,
-                "region": S3REGION
+            'region': S3REGION
         })
     } else if ($.util.env.beta === true) {
         var publisher = $.awspublish.create({
-                params: { "Bucket": S3BUCKET_BETA },
+            params: { 'Bucket': S3BUCKET_BETA },
-                "accessKeyId": process.env.AWS_BETA_ACCESS_KEY,
+            'accessKeyId': process.env.AWS_BETA_ACCESS_KEY,
-                "secretAccessKey": process.env.AWS_BETA_SECRET_KEY,
+            'secretAccessKey': process.env.AWS_BETA_SECRET_KEY,
-                "region": S3REGION_BETA
+            'region': S3REGION_BETA
         })
     } else if ($.util.env.gamma === true) {
         var publisher = $.awspublish.create({
-                params: { "Bucket": S3BUCKET_GAMMA },
+            params: { 'Bucket': S3BUCKET_GAMMA },
-                "accessKeyId": process.env.AWS_GAMMA_ACCESS_KEY,
+            'accessKeyId': process.env.AWS_GAMMA_ACCESS_KEY,
-                "secretAccessKey": process.env.AWS_GAMMA_SECRET_KEY,
+            'secretAccessKey': process.env.AWS_GAMMA_SECRET_KEY,
-                "region": S3REGION_GAMMA
+            'region': S3REGION_GAMMA
         })
+    } else {
+        return
     }
 
-    return gulp.src(DIST + '**/*')
+    return src(DIST + '**/*')
         .pipe($.awspublishRouter({
             cache: {
                 // cache for 5 minutes by default
@@ -426,4 +434,7 @@ gulp.task('deploy', (done) => {
         .pipe($.awspublish.reporter({
             states: ['create', 'update', 'delete']
         }))
-})
+}
+
+// `gulp deploy`
+export const deploy = series(deployBanner, s3)

package.json

@@ -3,12 +3,12 @@
   "version": "1.4.1",
   "author": {
     "name": "Matthias Kretschmann",
-    "email": "m@kretschmann.io"
+    "email": "matthias@bigchaindb.com"
   },
   "description": "Landing page for BigchainDB",
   "homepage": "https://www.bigchaindb.com",
-  "license": "(c) 2016 BigchainDB - All Rights Reserved",
+  "license": "(c) 2017 BigchainDB - All Rights Reserved",
-  "main": "gulpfile.js",
+  "main": "gulpfile.babel.js",
   "scripts": {
     "start": "gulp",
     "build": "gulp build --production"
@@ -23,8 +23,11 @@
     "vivus": "^0.4.0"
   },
   "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-preset-es2015": "^6.24.0",
     "browser-sync": ">=2.10.0",
     "concurrent-transform": "^1.0.0",
+    "critical": "^0.8.4",
     "cross-spawn": "^5.1.0",
     "del": "^2.0.2",
     "gulp": "github:gulpjs/gulp#4.0",
@@ -51,7 +54,7 @@
     "gulp-util": "^3.0.6"
   },
   "engines": {
-    "node": ">=0.10.29"
+    "node": ">=5.0.0"
   },
   "private": true,
   "repository": {