bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

Refactor for gulp 4 (#107) 

* refactor all the things for Gulp 4
* cleanup, rewrites, sprinkle in some ES6
* switch to clean-css
This commit is contained in:
Matthias Kretschmann 2017-03-22 16:34:05 +01:00 committed by GitHub
parent fdba953780
commit bb8fee0824
3 changed files with 155 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_ci/setup.sh
View File

@ -7,7 +7,7 @@ echo " Installing dependencies "
echo "============================================="
echo "$(tput sgr0)" # reset
npm install gulp -g
npm install gulpjs/gulp.git#4.0 -g
npm install
# Travis does that automatically after selecting ruby

321
gulpfile.js
View File

@ -1,32 +1,26 @@
'use strict';
'use strict'
// load plugins
var $ = require('gulp-load-plugins')();
const $ = require('gulp-load-plugins')()
// manually require modules that won"t get picked up by gulp-load-plugins
var gulp = require('gulp'),
del = require('del'),
pkg = require('./package.json'),
parallelize = require('concurrent-transform'),
browser = require('browser-sync').create(),
spawn = require('child_process').spawn;
// Temporary solution until gulp 4
// https://github.com/gulpjs/gulp/issues/355
var runSequence = require('run-sequence');
const gulp = require('gulp'),
del = require('del'),
pkg = require('./package.json'),
parallelize = require('concurrent-transform'),
browser = require('browser-sync').create(),
spawn = require('child_process').spawn
// handle errors
var onError = function(error) {
$.util.log('');
$.util.log($.util.colors.red('You fucked up:', error.message, 'on line' , error.lineNumber));
$.util.log('');
this.emit('end');
const onError = (error) => {
console.log($.util.colors.red('\nYou fucked up:', error.message, 'on line' , error.lineNumber, '\n'))
this.emit('end')
}
// 'development' is just default, production overrides are triggered
// by adding the production flag to the gulp command e.g. `gulp build --production`
var isProduction = ($.util.env.production === true ? true : false),
isStaging = ($.util.env.staging === true ? true : false);
const isProduction = ($.util.env.production === true ? true : false),
isStaging = ($.util.env.staging === true ? true : false)
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@ -34,13 +28,13 @@ var isProduction = ($.util.env.production === true ? true : false),
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
console.log("");
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"));
console.log($.util.colors.cyan(" __ __ __ "));
console.log($.util.colors.cyan(" |__). _ _|_ _ . _ | \ |__) "));
console.log($.util.colors.cyan(" |__)|(_)(_| )(_||| )|__/|__) "));
console.log($.util.colors.cyan(" _/ "));
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"));
console.log("");
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"))
console.log($.util.colors.cyan(" __ __ __ "))
console.log($.util.colors.cyan(" |__). _ _|_ _ . _ | \ |__) "))
console.log($.util.colors.cyan(" |__)|(_)(_| )(_||| )|__/|__) "))
console.log($.util.colors.cyan(" _/ "))
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"))
console.log("")
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@ -48,25 +42,25 @@ console.log("");
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Port to use for the development server
var PORT = 1337;
const PORT = 1337
// Browsers to target when prefixing CSS
var COMPATIBILITY = ['last 2 versions', 'Chrome >= 30', 'Safari >= 6.1', 'Firefox >= 35', 'Opera >= 32', 'iOS >= 8', 'Android >= 4', 'ie >= 10'];
const COMPATIBILITY = ['last 2 versions', 'Chrome >= 30', 'Safari >= 6.1', 'Firefox >= 35', 'Opera >= 32', 'iOS >= 8', 'Android >= 4', 'ie >= 10']
// paths
var SRC = '_src/',
DIST = '_dist/';
const SRC = '_src/',
DIST = '_dist/'
// deployment
var S3BUCKET = 'www.bigchaindb.com',
S3REGION = 'eu-central-1',
S3BUCKET_BETA = 'beta.bigchaindb.com',
S3REGION_BETA = 'eu-central-1',
S3BUCKET_GAMMA = 'gamma.bigchaindb.com',
S3REGION_GAMMA = 'eu-central-1';
const S3BUCKET = 'www.bigchaindb.com',
S3REGION = 'eu-central-1',
S3BUCKET_BETA = 'beta.bigchaindb.com',
S3REGION_BETA = 'eu-central-1',
S3BUCKET_GAMMA = 'gamma.bigchaindb.com',
S3REGION_GAMMA = 'eu-central-1'
// SVG sprite
var SPRITECONFIG = {
const SPRITECONFIG = {
dest: DIST + 'assets/img/',
mode: {
symbol: {
@ -77,7 +71,7 @@ var SPRITECONFIG = {
}
// code banner
var BANNER = [
const BANNER = [
'/**',
' ** <%= pkg.name %> v<%= pkg.version %>',
' ** <%= pkg.description %>',
@ -89,54 +83,87 @@ var BANNER = [
' ** <%= pkg.repository.url %> ',
' **/',
''
].join('\n');
].join('\n')
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Tasks
// gulp 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
//
gulp.task('clean', function(done) {
function clean(done) {
return del([
DIST + '**/*',
DIST + '.*' // delete all hidden files
], done);
});
])
done()
}
//
// Jekyll
//
gulp.task('jekyll', function(cb) {
function jekyll(done) {
browser.notify('Compiling Jekyll');
browser.notify('Compiling Jekyll')
if (isProduction) {
process.env.JEKYLL_ENV = 'production';
var jekyll_options = 'jekyll build';
process.env.JEKYLL_ENV = 'production'
var jekyll_options = 'jekyll build'
} else if (isStaging) {
process.env.JEKYLL_ENV = 'staging';
var jekyll_options = 'jekyll build';
process.env.JEKYLL_ENV = 'staging'
var jekyll_options = 'jekyll build'
} else {
process.env.JEKYLL_ENV = 'development';
var jekyll_options = 'jekyll build --incremental --drafts --future';
process.env.JEKYLL_ENV = 'development'
var jekyll_options = 'jekyll build --incremental --drafts --future'
}
var jekyll = spawn('bundle', ['exec', jekyll_options], { stdio: 'inherit' });
const jekyll = spawn('bundle', ['exec', jekyll_options], { stdio: 'inherit' })
jekyll.on('exit', function(code) {
cb(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code);
});
});
return jekyll
.on('error', (error) => onError() )
.on('close', done)
};
//
// HTML
//
gulp.task('html', function() {
function html() {
return gulp.src(DIST + '/**/*.html')
.pipe($.if(isProduction || isStaging, $.htmlmin({
collapseWhitespace: true,
@ -149,31 +176,31 @@ gulp.task('html', function() {
minifyJS: true,
minifyCSS: true
})))
.pipe(gulp.dest(DIST));
});
.pipe(gulp.dest(DIST))
};
//
// Styles
//
gulp.task('css', function() {
function css() {
return gulp.src(SRC + '_assets/styles/bigchain.scss')
.pipe($.sourcemaps.init())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.autoprefixer({ browsers: COMPATIBILITY }))
.pipe($.if(isProduction || isStaging, $.cssmin()))
.pipe($.if(isProduction || isStaging, $.cleanCss()))
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(DIST + 'assets/css/'))
.pipe(browser.stream());
});
.pipe(browser.stream())
};
//
// JavaScript
//
gulp.task('js', function() {
function js() {
return gulp.src([
SRC + '_assets/javascripts/bigchain.js',
SRC + '_assets/javascripts/page-*.js'
@ -184,14 +211,14 @@ gulp.task('js', function() {
.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(gulp.dest(DIST + 'assets/js/'))
};
//
// SVG sprite
//
gulp.task('svg', function() {
function svg() {
return gulp.src(SRC + '_assets/images/**/*.svg')
.pipe($.if(isProduction || isStaging, $.imagemin({
svgoPlugins: [{
@ -199,14 +226,14 @@ gulp.task('svg', function() {
}]
})))
.pipe($.svgSprite(SPRITECONFIG))
.pipe(gulp.dest(DIST + 'assets/img/'));
});
.pipe(gulp.dest(DIST + 'assets/img/'))
}
//
// Copy Images
//
gulp.task('images', function() {
function images() {
return gulp.src(SRC + '_assets/images/**/*')
.pipe($.if(isProduction || isStaging, $.imagemin({
optimizationLevel: 3, // png
@ -215,33 +242,32 @@ gulp.task('images', function() {
multipass: true, // svg
svgoPlugins: [{ removeViewBox: false }]
})))
.pipe(gulp.dest(DIST + 'assets/img/'));
});
.pipe(gulp.dest(DIST + 'assets/img/'))
}
//
// Copy Fonts
//
gulp.task('fonts', function() {
function fonts() {
return gulp.src(SRC + '_assets/fonts/**/*')
.pipe($.rename({dirname: ''}))
.pipe(gulp.dest(DIST + 'assets/fonts/'));
});
.pipe(gulp.dest(DIST + 'assets/fonts/'))
}
//
// Copy Videos
//
gulp.task('videos', function() {
function videos() {
return gulp.src(SRC + '_assets/videos/**/*')
.pipe(gulp.dest(DIST + 'assets/videos/'));
});
.pipe(gulp.dest(DIST + 'assets/videos/'))
}
//
// Revision static assets
//
gulp.task('rev', function() {
function 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}')
@ -249,99 +275,56 @@ gulp.task('rev', function() {
.pipe(gulp.dest(DIST + '/assets/'))
// output rev manifest for next replace task
.pipe($.rev.manifest())
.pipe(gulp.dest(DIST + '/assets/'));
.pipe(gulp.dest(DIST + '/assets/'))
}
});
done()
};
//
// Replace all links to assets in files
// from a manifest file
//
gulp.task('rev:replace', function() {
function 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');
return gulp.src(DIST + '/**/*.{html,xml,txt,json,css,js}')
.pipe($.revReplace({ manifest: manifest }))
.pipe(gulp.dest(DIST));
.pipe(gulp.dest(DIST))
}
});
done()
};
//
// Dev Server
//
gulp.task('server', ['build'], function() {
function server(done) {
browser.init({
server: DIST,
port: PORT,
reloadDebounce: 2000
});
});
})
done()
};
//
// Autoreload on gulpfile.js changes
// Watch for file changes
//
gulp.task('gulp-autoreload', function() {
// Store current process if any
var p;
gulp.watch('gulpfile.js', spawnChildren);
spawnChildren();
function spawnChildren(e) {
if(p) {
p.kill();
}
p = spawn('gulp', { stdio: 'inherit' });
}
});
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Task sequences
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//
// Build site, run server, and watch for file changes
//
gulp.task('default', ['build', 'server'], function() {
gulp.watch([SRC + '_assets/styles/**/*.scss'], ['css']);
gulp.watch([SRC + '_assets/javascripts/**/*.js'], ['js', browser.reload]);
gulp.watch([SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}'], ['images', browser.reload]);
gulp.watch([SRC + '_assets/images/**/*.{svg}'], ['svg', browser.reload]);
gulp.watch([SRC + '_assets/videos/**/*.{mp4,webm}'], ['videos', browser.reload]);
gulp.watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './_config.yml', SRC + '_includes/svg/*'], ['build', browser.reload]);
gulp.watch('gulpfile.js', [ 'gulp-autoreload' ]);
});
//
// Full build
//
// `gulp build` is the development build
// `gulp build --production` is the production build
//
gulp.task('build', function(done) {
$.util.log($.util.colors.gray(" ------------------------------------------"));
$.util.log($.util.colors.green(' Building ' + ($.util.env.production ? 'production' : $.util.env.staging ? 'staging' : 'dev') + ' version...'));
$.util.log($.util.colors.gray(" ------------------------------------------"));
runSequence(
'clean',
'jekyll',
['html', 'css', 'js', 'images', 'fonts', 'videos', 'svg'],
'rev',
'rev:replace',
done
);
});
function watch() {
gulp.watch(SRC + '_assets/styles/**/*.scss').on('all', gulp.series(css))
gulp.watch(SRC + '_assets/javascripts/**/*.js').on('all', gulp.series(js, browser.reload))
gulp.watch(SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}').on('all', gulp.series(images, browser.reload))
gulp.watch(SRC + '_assets/images/**/*.{svg}').on('all', gulp.series(svg, browser.reload))
gulp.watch(SRC + '_assets/videos/**/*.{mp4,webm}').on('all', gulp.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))
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@ -353,7 +336,19 @@ gulp.task('build', function(done) {
// gulp deploy --beta
// gulp deploy --gamma
//
gulp.task('deploy', function() {
gulp.task('deploy', (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()
return
}
// create publisher, define config
if ($.util.env.live === true) {
@ -362,35 +357,21 @@ gulp.task('deploy', function() {
"accessKeyId": process.env.AWS_ACCESS_KEY,
"secretAccessKey": process.env.AWS_SECRET_KEY,
"region": S3REGION
});
$.util.log($.util.colors.gray(" ------------------------------------------"));
$.util.log($.util.colors.green(' Deploying to Live... '));
$.util.log($.util.colors.gray(" ------------------------------------------"));
}
if ($.util.env.beta === true) {
})
} else if ($.util.env.beta === true) {
var publisher = $.awspublish.create({
params: { "Bucket": S3BUCKET_BETA },
"accessKeyId": process.env.AWS_BETA_ACCESS_KEY,
"secretAccessKey": process.env.AWS_BETA_SECRET_KEY,
"region": S3REGION_BETA
});
$.util.log($.util.colors.gray(" ------------------------------------------"));
$.util.log($.util.colors.green(' Deploying to Beta... '));
$.util.log($.util.colors.gray(" ------------------------------------------"));
}
if ($.util.env.gamma === true) {
})
} else if ($.util.env.gamma === true) {
var publisher = $.awspublish.create({
params: { "Bucket": S3BUCKET_GAMMA },
"accessKeyId": process.env.AWS_GAMMA_ACCESS_KEY,
"secretAccessKey": process.env.AWS_GAMMA_SECRET_KEY,
"region": S3REGION_GAMMA
});
$.util.log($.util.colors.gray(" ------------------------------------------"));
$.util.log($.util.colors.green(' Deploying to Gamma... '));
$.util.log($.util.colors.gray(" ------------------------------------------"));
})
}
return gulp.src(DIST + '**/*')
@ -423,10 +404,6 @@ gulp.task('deploy', function() {
},
// font mime types
'\.eot$': {
key: '$&',
headers: { 'Content-Type': 'application/vnd.ms-fontobject' }
},
'\.ttf$': {
key: '$&',
headers: { 'Content-Type': 'application/x-font-ttf' }
@ -448,5 +425,5 @@ gulp.task('deploy', function() {
.pipe(publisher.sync()) // delete files in bucket that are not in local folder
.pipe($.awspublish.reporter({
states: ['create', 'update', 'delete']
}));
});
}))
})

10
package.json
View File

@ -14,7 +14,7 @@
"build": "gulp build --production"
},
"dependencies": {
"is-in-viewport": "^2.3.0",
"is-in-viewport": "^3.0.0",
"jquery": "^3.1.1",
"normalize-css": ">=2.3.1",
"normalize-opentype.css": ">=0.2.4",
@ -27,12 +27,13 @@
"concurrent-transform": "^1.0.0",
"cross-spawn": "^5.1.0",
"del": "^2.0.2",
"gulp": "^3.9.0",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^3.0.1",
"gulp-awspublish": "^3.0.0",
"gulp-awspublish-router": "^0.1.1",
"gulp-clean-css": "^3.0.4",
"gulp-cli": "^1.2.2",
"gulp-concat": "^2.6.0",
"gulp-cssmin": "^0.1.7",
"gulp-header": "^1.7.1",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
@ -47,8 +48,7 @@
"gulp-sourcemaps": "^2.4.1",
"gulp-svg-sprite": "^1.2.9",
"gulp-uglify": "^2.0.1",
"gulp-util": "^3.0.6",
"run-sequence": "^1.1.2"
"gulp-util": "^3.0.6"
},
"engines": {
"node": ">=0.10.29"