bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-06-28 16:48:05 +02:00
Code Releases Activity

Build improvements (#108)

Browse Source 
* 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
This commit is contained in:
Matthias Kretschmann 2017-03-28 17:55:40 +02:00 committed by GitHub
parent 9ed2941fd2
commit da66e404ce
4 changed files with 189 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc Normal file
View File

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

BIN
_src/_assets/images/hero-berlin.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 220 KiB

347
gulpfile.js → gulpfile.babel.js
View File

@ -3,13 +3,13 @@
// load plugins // load plugins
const $ = require('gulp-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 // handle errors
const onError = (error) => { const onError = (error) => {
@ -73,71 +73,34 @@ const SPRITECONFIG = {
// code banner // code banner
const BANNER = [ const BANNER = [
'/**', '/**',
' ** <%= pkg.name %> v<%= pkg.version %>', ' ** <%= pkg.name %>',
' ** <%= pkg.description %>', ' ** <%= pkg.description %>',
' ** <%= pkg.homepage %>', ' ** <%= pkg.homepage %>',
' **', ' **',
' ** <%= pkg.author.name %> <<%= pkg.author.email %>>', ' ** <%= pkg.author.name %> <<%= pkg.author.email %>>',
' **',
' ** ',
' ** <%= pkg.repository.url %> ',
' **/', ' **/',
'' ''
].join('\n') ].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 // Delete build artifacts
// //
function clean(done) { export const clean = () =>
return del([ del([
DIST + '**/*', DIST + '**/*',
DIST + '.*' // delete all hidden files DIST + '.*' // delete all hidden files
]) ])
done()
}
// //
// Jekyll // Jekyll
// //
function jekyll(done) { export const jekyll = (done) => {
browser.notify('Compiling Jekyll') browser.notify('Compiling Jekyll')
@ -152,181 +115,236 @@ function jekyll(done) {
var jekyll_options = 'jekyll build --incremental --drafts --future' 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 // HTML
// //
function html() { export const html = () => src(DIST + '**/*.html')
return gulp.src(DIST + '/**/*.html') .pipe($.if(isProduction || isStaging, $.htmlmin({
.pipe($.if(isProduction || isStaging, $.htmlmin({ collapseWhitespace: true,
collapseWhitespace: true, conservativeCollapse: true,
conservativeCollapse: true, removeComments: true,
removeComments: true, useShortDoctype: true,
useShortDoctype: true, collapseBooleanAttributes: true,
collapseBooleanAttributes: true, removeRedundantAttributes: true,
removeRedundantAttributes: true, removeEmptyAttributes: true,
removeEmptyAttributes: true, minifyJS: true,
minifyJS: true, minifyCSS: true
minifyCSS: true })))
}))) .pipe(dest(DIST))
.pipe(gulp.dest(DIST))
};
// //
// Styles // 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($.sass().on('error', $.sass.logError)) .pipe($.autoprefixer({ browsers: COMPATIBILITY }))
.pipe($.autoprefixer({ browsers: COMPATIBILITY })) .pipe($.if(isProduction || isStaging, $.cleanCss()))
.pipe($.if(isProduction || isStaging, $.cleanCss())) .pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
.pipe($.if(!isProduction, $.sourcemaps.write())) .pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))
.pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg }))) .pipe($.rename({ suffix: '.min' }))
.pipe($.rename({ suffix: '.min' })) .pipe(dest(DIST + 'assets/css/'))
.pipe(gulp.dest(DIST + 'assets/css/')) .pipe(browser.stream())
.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 // JavaScript
// //
function js() { const js = () =>
return gulp.src([ src([
SRC + '_assets/javascripts/bigchain.js', SRC + '_assets/javascripts/bigchain.js',
SRC + '_assets/javascripts/page-*.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, $.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($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({suffix: '.min'})) .pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest(DIST + 'assets/js/')) .pipe(dest(DIST + 'assets/js/'))
};
// //
// SVG sprite // SVG sprite
// //
function svg() { export const svg = () => src(SRC + '_assets/images/**/*.svg')
return gulp.src(SRC + '_assets/images/**/*.svg') .pipe($.if(isProduction || isStaging, $.imagemin({
.pipe($.if(isProduction || isStaging, $.imagemin({ svgoPlugins: [{ removeRasterImages: true }]
svgoPlugins: [{ })))
removeRasterImages: true .pipe($.svgSprite(SPRITECONFIG))
}] .pipe(dest(DIST + 'assets/img/'))
})))
.pipe($.svgSprite(SPRITECONFIG))
.pipe(gulp.dest(DIST + 'assets/img/'))
}
// //
// Copy Images // 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 // Copy Fonts
// //
function fonts() { export const fonts = () => src(SRC + '_assets/fonts/**/*')
return gulp.src(SRC + '_assets/fonts/**/*') .pipe($.rename({dirname: ''}))
.pipe($.rename({dirname: ''})) .pipe(dest(DIST + 'assets/fonts/'))
.pipe(gulp.dest(DIST + 'assets/fonts/'))
}
// //
// Copy Videos // 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 // Revision static assets
// //
function rev(done) { export const rev = (done) => {
// globbing is slow so do everything conditionally for faster dev build // globbing is slow so do everything conditionally for faster dev build
if (isProduction || isStaging) { 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($.rev())
.pipe(gulp.dest(DIST + '/assets/')) .pipe(dest(DIST + 'assets/'))
// output rev manifest for next replace task // output rev manifest for next replace task
.pipe($.rev.manifest()) .pipe($.rev.manifest())
.pipe(gulp.dest(DIST + '/assets/')) .pipe(dest(DIST + 'assets/'))
} }
done() done()
}; }
// //
// Replace all links to assets in files // Replace all links to assets in files
// from a manifest file // from a manifest file
// //
function revReplace(done) { export const revReplace = (done) => {
// globbing is slow so do everything conditionally for faster dev build // globbing is slow so do everything conditionally for faster dev build
if (isProduction || isStaging) { 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($.revReplace({ manifest: manifest }))
.pipe(gulp.dest(DIST)) .pipe(dest(DIST))
} }
done() done()
}; }
// //
// Dev Server // Dev Server
// //
function server(done) { export const server = (done) => {
browser.init({ browser.init({
server: DIST, server: DIST,
port: PORT, port: PORT,
reloadDebounce: 2000 reloadDebounce: 2000
}) })
done() done()
}; }
// //
// Watch for file changes // 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 // Deployment
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@ -336,45 +354,35 @@ function watch() {
// gulp deploy --beta // gulp deploy --beta
// gulp deploy --gamma // 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 // create publisher, define config
if ($.util.env.live === true) { if ($.util.env.live === true) {
var publisher = $.awspublish.create({ 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) { } else if ($.util.env.beta === true) {
var publisher = $.awspublish.create({ 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) { } else if ($.util.env.gamma === true) {
var publisher = $.awspublish.create({ 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({ .pipe($.awspublishRouter({
cache: { cache: {
// cache for 5 minutes by default // cache for 5 minutes by default
@ -426,4 +434,7 @@ gulp.task('deploy', (done) => {
.pipe($.awspublish.reporter({ .pipe($.awspublish.reporter({
states: ['create', 'update', 'delete'] states: ['create', 'update', 'delete']
})) }))
}) }
// `gulp deploy`
export const deploy = series(deployBanner, s3)

11
package.json
View File

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