ES6-ified
This commit is contained in:
Sam Potts
390
gulpfile.js
390
gulpfile.js
@ -4,27 +4,34 @@
|
||||
/* global require, __dirname */
|
||||
/* eslint no-console: "off" */
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var gulp = require('gulp');
|
||||
var gutil = require('gulp-util');
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
var less = require('gulp-less');
|
||||
var sass = require('gulp-sass');
|
||||
var cleanCSS = require('gulp-clean-css');
|
||||
var run = require('run-sequence');
|
||||
var prefix = require('gulp-autoprefixer');
|
||||
var svgstore = require('gulp-svgstore');
|
||||
var svgmin = require('gulp-svgmin');
|
||||
var rename = require('gulp-rename');
|
||||
var s3 = require('gulp-s3');
|
||||
var replace = require('gulp-replace');
|
||||
var open = require('gulp-open');
|
||||
var size = require('gulp-size');
|
||||
var root = __dirname;
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const gulp = require('gulp');
|
||||
const gutil = require('gulp-util');
|
||||
const concat = require('gulp-concat');
|
||||
const less = require('gulp-less');
|
||||
const sass = require('gulp-sass');
|
||||
const cleancss = require('gulp-clean-css');
|
||||
const run = require('run-sequence');
|
||||
const prefix = require('gulp-autoprefixer');
|
||||
const svgstore = require('gulp-svgstore');
|
||||
const svgmin = require('gulp-svgmin');
|
||||
const rename = require('gulp-rename');
|
||||
const s3 = require('gulp-s3');
|
||||
const replace = require('gulp-replace');
|
||||
const open = require('gulp-open');
|
||||
const size = require('gulp-size');
|
||||
const rollup = require('gulp-better-rollup');
|
||||
const babel = require('rollup-plugin-babel');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const uglify = require('rollup-plugin-uglify');
|
||||
const { minify } = require('uglify-es');
|
||||
const commonjs = require('rollup-plugin-commonjs');
|
||||
const resolve = require('rollup-plugin-node-resolve');
|
||||
|
||||
var paths = {
|
||||
const root = __dirname;
|
||||
|
||||
const paths = {
|
||||
plyr: {
|
||||
// Source paths
|
||||
src: {
|
||||
@ -54,82 +61,117 @@ var paths = {
|
||||
};
|
||||
|
||||
// Task arrays
|
||||
var tasks = {
|
||||
const tasks = {
|
||||
less: [],
|
||||
scss: [],
|
||||
js: [],
|
||||
sprite: [],
|
||||
};
|
||||
|
||||
// Fetch bundles from JSON
|
||||
var bundles = loadJSON(path.join(root, 'bundles.json'));
|
||||
var package = loadJSON(path.join(root, 'package.json'));
|
||||
|
||||
// Load json
|
||||
function loadJSON(path) {
|
||||
function loadJSON(pathname) {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(path));
|
||||
return JSON.parse(fs.readFileSync(pathname));
|
||||
} catch (err) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
var build = {
|
||||
js: function(files, bundle) {
|
||||
Object.keys(files).forEach(function(key) {
|
||||
var name = 'js-' + key;
|
||||
// Fetch bundles from JSON
|
||||
const bundles = loadJSON(path.join(root, 'bundles.json'));
|
||||
const pkg = loadJSON(path.join(root, 'package.json'));
|
||||
const sizeOptions = { showFiles: true, gzip: true };
|
||||
|
||||
// Browserlist
|
||||
const browsers = ['> 1%', 'last 2 versions'];
|
||||
|
||||
// Babel config
|
||||
const babelrc = {
|
||||
presets: [
|
||||
[
|
||||
'env',
|
||||
{
|
||||
targets: {
|
||||
browsers,
|
||||
},
|
||||
useBuiltIns: true,
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: ['external-helpers'],
|
||||
babelrc: false,
|
||||
exclude: 'node_modules/**',
|
||||
};
|
||||
|
||||
const build = {
|
||||
js(files, bundle, options) {
|
||||
Object.keys(files).forEach(key => {
|
||||
const name = `js-${key}`;
|
||||
tasks.js.push(name);
|
||||
|
||||
gulp.task(name, function() {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(bundles[bundle].js[key])
|
||||
.pipe(concat(key))
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(
|
||||
rollup(
|
||||
{
|
||||
plugins: [resolve(), commonjs(), babel(babelrc), uglify({}, minify)],
|
||||
},
|
||||
options
|
||||
)
|
||||
)
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(gulp.dest(paths[bundle].output))
|
||||
);
|
||||
});
|
||||
},
|
||||
less: function(files, bundle) {
|
||||
Object.keys(files).forEach(function(key) {
|
||||
var name = 'less-' + key;
|
||||
less(files, bundle) {
|
||||
Object.keys(files).forEach(key => {
|
||||
const name = `less-${key}`;
|
||||
tasks.less.push(name);
|
||||
|
||||
gulp.task(name, function() {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(bundles[bundle].less[key])
|
||||
.pipe(less())
|
||||
.on('error', gutil.log)
|
||||
.pipe(concat(key))
|
||||
.pipe(prefix(['last 2 versions'], { cascade: false }))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
.pipe(prefix(browsers, { cascade: false }))
|
||||
.pipe(cleancss())
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(paths[bundle].output))
|
||||
);
|
||||
});
|
||||
},
|
||||
scss: function(files, bundle) {
|
||||
Object.keys(files).forEach(function(key) {
|
||||
var name = 'scss-' + key;
|
||||
scss(files, bundle) {
|
||||
Object.keys(files).forEach(key => {
|
||||
const name = `scss-${key}`;
|
||||
tasks.scss.push(name);
|
||||
|
||||
gulp.task(name, function() {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(bundles[bundle].scss[key])
|
||||
.pipe(sass())
|
||||
.on('error', gutil.log)
|
||||
.pipe(concat(key))
|
||||
.pipe(prefix(['last 2 versions'], { cascade: false }))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
.pipe(prefix(browsers, { cascade: false }))
|
||||
.pipe(cleancss())
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(paths[bundle].output))
|
||||
);
|
||||
});
|
||||
},
|
||||
sprite: function(bundle) {
|
||||
var name = 'sprite-' + bundle;
|
||||
sprite(bundle) {
|
||||
const name = `sprite-${bundle}`;
|
||||
tasks.sprite.push(name);
|
||||
|
||||
// Process Icons
|
||||
gulp.task(name, function() {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(paths[bundle].src.sprite)
|
||||
.pipe(
|
||||
svgmin({
|
||||
@ -142,33 +184,35 @@ var build = {
|
||||
)
|
||||
.pipe(svgstore())
|
||||
.pipe(rename({ basename: bundle }))
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(paths[bundle].output))
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Plyr core files
|
||||
build.js(bundles.plyr.js, 'plyr');
|
||||
build.js(bundles.plyr.js, 'plyr', { name: 'Plyr', format: 'umd' });
|
||||
|
||||
build.less(bundles.plyr.less, 'plyr');
|
||||
build.scss(bundles.plyr.scss, 'plyr');
|
||||
build.sprite('plyr');
|
||||
|
||||
// Demo files
|
||||
build.less(bundles.demo.less, 'demo');
|
||||
build.js(bundles.demo.js, 'demo');
|
||||
build.js(bundles.demo.js, 'demo', { format: 'es' });
|
||||
|
||||
// Build all JS
|
||||
gulp.task('js', function() {
|
||||
gulp.task('js', () => {
|
||||
run(tasks.js);
|
||||
});
|
||||
|
||||
// Build SCSS (for testing, default is LESS)
|
||||
gulp.task('scss', function() {
|
||||
gulp.task('scss', () => {
|
||||
run(tasks.scss);
|
||||
});
|
||||
|
||||
// Watch for file changes
|
||||
gulp.task('watch', function() {
|
||||
gulp.task('watch', () => {
|
||||
// Plyr core
|
||||
gulp.watch(paths.plyr.src.js, tasks.js);
|
||||
gulp.watch(paths.plyr.src.less, tasks.less);
|
||||
@ -180,7 +224,7 @@ gulp.task('watch', function() {
|
||||
});
|
||||
|
||||
// Default gulp task
|
||||
gulp.task('default', function() {
|
||||
gulp.task('default', () => {
|
||||
run(tasks.js, tasks.less, tasks.sprite, 'watch');
|
||||
});
|
||||
|
||||
@ -188,13 +232,13 @@ gulp.task('default', function() {
|
||||
// --------------------------------------------
|
||||
|
||||
// Some options
|
||||
var aws = loadJSON(path.join(root, 'aws.json'));
|
||||
var version = package.version;
|
||||
var maxAge = 31536000; // 1 year
|
||||
var options = {
|
||||
const aws = loadJSON(path.join(root, 'aws.json'));
|
||||
const { version } = pkg;
|
||||
const maxAge = 31536000; // 1 year
|
||||
const options = {
|
||||
cdn: {
|
||||
headers: {
|
||||
'Cache-Control': 'max-age=' + maxAge,
|
||||
'Cache-Control': `max-age=${maxAge}`,
|
||||
Vary: 'Accept-Encoding',
|
||||
},
|
||||
},
|
||||
@ -204,11 +248,11 @@ var options = {
|
||||
Vary: 'Accept-Encoding',
|
||||
},
|
||||
},
|
||||
symlinks: function(version, filename) {
|
||||
symlinks(ver, filename) {
|
||||
return {
|
||||
headers: {
|
||||
// http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
|
||||
'x-amz-website-redirect-location': '/' + version + '/' + filename,
|
||||
'x-amz-website-redirect-location': `/${ver}/${filename}`,
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
|
||||
},
|
||||
};
|
||||
@ -217,105 +261,105 @@ var options = {
|
||||
|
||||
// If aws is setup
|
||||
if ('cdn' in aws) {
|
||||
var regex =
|
||||
const regex =
|
||||
'(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?';
|
||||
var cdnpath = new RegExp(aws.cdn.domain + '/' + regex, 'gi');
|
||||
var semver = new RegExp('v' + regex, 'gi');
|
||||
var localPath = new RegExp('(../)?dist', 'gi');
|
||||
var versionPath = 'https://' + aws.cdn.domain + '/' + version;
|
||||
const cdnpath = new RegExp(`${aws.cdn.domain}/${regex}`, 'gi');
|
||||
const semver = new RegExp(`v${regex}`, 'gi');
|
||||
const localPath = new RegExp('(../)?dist', 'gi');
|
||||
const versionPath = `https://${aws.cdn.domain}/${version}`;
|
||||
|
||||
// Publish version to CDN bucket
|
||||
gulp.task('cdn', () => {
|
||||
console.log(`Uploading ${version} to ${aws.cdn.domain}...`);
|
||||
|
||||
// Upload to CDN
|
||||
return gulp
|
||||
.src(paths.upload)
|
||||
.pipe(
|
||||
size({
|
||||
showFiles: true,
|
||||
gzip: true,
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
rename(p => {
|
||||
p.dirname = path.dirname.replace('.', version);
|
||||
})
|
||||
)
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.cdn, options.cdn));
|
||||
});
|
||||
|
||||
// Publish to demo bucket
|
||||
gulp.task('demo', () => {
|
||||
console.log(`Uploading ${version} demo to ${aws.demo.domain}...`);
|
||||
|
||||
// Replace versioned files in readme.md
|
||||
gulp
|
||||
.src([`${root}/readme.md`])
|
||||
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}`))
|
||||
.pipe(gulp.dest(root));
|
||||
|
||||
// Replace versioned files in plyr.js
|
||||
gulp
|
||||
.src(path.join(root, 'src/js/plyr.js'))
|
||||
.pipe(replace(semver, `v${version}`))
|
||||
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}`))
|
||||
.pipe(gulp.dest(path.join(root, 'src/js/')));
|
||||
|
||||
// Replace local file paths with remote paths in demo HTML
|
||||
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
|
||||
gulp
|
||||
.src([`${paths.demo.root}*.html`])
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.demo, options.demo));
|
||||
|
||||
// Upload error.html to cdn (as well as demo site)
|
||||
return gulp
|
||||
.src([`${paths.demo.root}error.html`])
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.cdn, options.demo));
|
||||
});
|
||||
|
||||
// Update symlinks for latest
|
||||
/* gulp.task("symlinks", function () {
|
||||
console.log("Updating symlinks...");
|
||||
|
||||
return gulp.src(paths.upload)
|
||||
.pipe(through.obj(function (chunk, enc, callback) {
|
||||
if (chunk.stat.isFile()) {
|
||||
// Get the filename
|
||||
var filename = chunk.path.split("/").reverse()[0];
|
||||
|
||||
// Create the 0 byte redirect files to upload
|
||||
createFile(filename, "")
|
||||
.pipe(rename(function (path) {
|
||||
path.dirname = path.dirname.replace(".", "latest");
|
||||
}))
|
||||
// Upload to S3 with correct headers
|
||||
.pipe(s3(aws.cdn, options.symlinks(version, filename)));
|
||||
}
|
||||
|
||||
callback(null, chunk);
|
||||
}));
|
||||
}); */
|
||||
|
||||
// Open the demo site to check it's sweet
|
||||
gulp.task('open', () => {
|
||||
console.log(`Opening ${aws.demo.domain}...`);
|
||||
|
||||
// A file must be specified or gulp will skip the task
|
||||
// Doesn't matter which file since we set the URL above
|
||||
// Weird, I know...
|
||||
return gulp.src([`${paths.demo.root}index.html`]).pipe(
|
||||
open('', {
|
||||
url: `http://${aws.demo.domain}`,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Do everything
|
||||
gulp.task('publish', () => {
|
||||
run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo');
|
||||
});
|
||||
}
|
||||
|
||||
// Publish version to CDN bucket
|
||||
gulp.task('cdn', function() {
|
||||
console.log('Uploading ' + version + ' to ' + aws.cdn.domain + '...');
|
||||
|
||||
// Upload to CDN
|
||||
return gulp
|
||||
.src(paths.upload)
|
||||
.pipe(
|
||||
size({
|
||||
showFiles: true,
|
||||
gzip: true,
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
rename(function(path) {
|
||||
path.dirname = path.dirname.replace('.', version);
|
||||
})
|
||||
)
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.cdn, options.cdn));
|
||||
});
|
||||
|
||||
// Publish to demo bucket
|
||||
gulp.task('demo', function() {
|
||||
console.log('Uploading ' + version + ' demo to ' + aws.demo.domain + '...');
|
||||
|
||||
// Replace versioned files in readme.md
|
||||
gulp
|
||||
.src([root + '/readme.md'])
|
||||
.pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
|
||||
.pipe(gulp.dest(root));
|
||||
|
||||
// Replace versioned files in plyr.js
|
||||
gulp
|
||||
.src(path.join(root, 'src/js/plyr.js'))
|
||||
.pipe(replace(semver, 'v' + version))
|
||||
.pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
|
||||
.pipe(gulp.dest(path.join(root, 'src/js/')));
|
||||
|
||||
// Replace local file paths with remote paths in demo HTML
|
||||
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
|
||||
gulp
|
||||
.src([paths.demo.root + '*.html'])
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.demo, options.demo));
|
||||
|
||||
// Upload error.html to cdn (as well as demo site)
|
||||
return gulp
|
||||
.src([paths.demo.root + 'error.html'])
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.cdn, options.demo));
|
||||
});
|
||||
|
||||
// Open the demo site to check it's sweet
|
||||
/*gulp.task("symlinks", function () {
|
||||
console.log("Updating symlinks...");
|
||||
|
||||
return gulp.src(paths.upload)
|
||||
.pipe(through.obj(function (chunk, enc, callback) {
|
||||
if (chunk.stat.isFile()) {
|
||||
// Get the filename
|
||||
var filename = chunk.path.split("/").reverse()[0];
|
||||
|
||||
// Create the 0 byte redirect files to upload
|
||||
createFile(filename, "")
|
||||
.pipe(rename(function (path) {
|
||||
path.dirname = path.dirname.replace(".", "latest");
|
||||
}))
|
||||
// Upload to S3 with correct headers
|
||||
.pipe(s3(aws.cdn, options.symlinks(version, filename)));
|
||||
}
|
||||
|
||||
callback(null, chunk);
|
||||
}));
|
||||
});*/
|
||||
|
||||
// Open the demo site to check it's sweet
|
||||
gulp.task('open', function() {
|
||||
console.log('Opening ' + aws.demo.domain + '...');
|
||||
|
||||
// A file must be specified or gulp will skip the task
|
||||
// Doesn't matter which file since we set the URL above
|
||||
// Weird, I know...
|
||||
return gulp.src([paths.demo.root + 'index.html']).pipe(
|
||||
open('', {
|
||||
url: 'http://' + aws.demo.domain,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Do everything
|
||||
gulp.task('publish', function() {
|
||||
run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user