diff options
Diffstat (limited to 'gulpfile.js')
| -rw-r--r-- | gulpfile.js | 390 |
1 files changed, 217 insertions, 173 deletions
diff --git a/gulpfile.js b/gulpfile.js index 77c71b1d..a59073ac 100644 --- a/gulpfile.js +++ b/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; - -var paths = { +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'); + +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; -} - -// 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); + 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}`, }) - ) - .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'); -}); + // Do everything + gulp.task('publish', () => { + run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo'); + }); +} |