feat: Use Rollup to generate dist files (#4301)

.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": [ "es3", ["es2015", {"loose": true}] ],
-  "plugins": ["inline-json"]
+  "presets": [
+    "es3",
+    ["es2015", {
+      "loose": true
+    }]
+  ]
 }

.travis.yml

@@ -5,6 +5,10 @@ before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+after_failure:
+  - npm ls --depth=1
+after_success:
+  - npm run assets
 notifications:
   irc:
     channels:

build/assets.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const zlib = require('zlib');
+const Promise = require('bluebird');
+const klawSync = require('klaw-sync');
+const filesize = require('filesize');
+const Table = require('cli-table');
+
+const files = klawSync('dist/', {
+  ignore: ['examples', 'lang', 'font', 'ie8', '*.zip', '*.gz'],
+  nodir: true
+});
+
+Promise.all(files.map(gzipAndStat))
+.then(mapFiles)
+.then(function(files) {
+  logTable(files);
+
+  return files;
+})
+.then(cleanup)
+.catch(function(err) {
+  console.error(err.stack);
+});
+
+function cleanup(files) {
+  files.forEach(function(file) {
+    fs.unlinkSync('dist/' + file[0] + '.gz');
+  });
+}
+
+function mapFiles(files) {
+  return files.map(function(file) {
+    const path = file[0].path;
+    const fileStat = file[0].stats;
+    const gzStat = file[1];
+    return [file[0].path.split('dist/')[1], filesize(fileStat.size), filesize(gzStat.size)];
+  });
+}
+
+function gzipAndStat(file) {
+  return new Promise(function(resolve, reject) {
+    const readStream = fs.createReadStream(file.path);
+    const writeStream = fs.createWriteStream(file.path + '.gz');
+    const gzip = zlib.createGzip();
+    readStream.pipe(gzip).pipe(writeStream).on('close', function() {
+      const gzStat = fs.statSync(file.path + '.gz');
+
+      resolve([file, gzStat]);
+    })
+    .on('error', reject);
+  });
+}
+
+function logTable(files) {
+  const table = new Table({
+    head: ['filename', 'size', 'gzipped'],
+    colAligns: ['left', 'right', 'right'],
+    style: {
+      border: ['white']
+    }
+  });
+
+  table.push.apply(table, files);
+  console.log(table.toString());
+}

build/grunt.js

@@ -408,8 +408,7 @@ module.exports = function(grunt) {
       ],
       dev: [
         'shell:babel',
-        'browserify:watch',
-        'browserify:watchnovtt',
+        'shell:rollupwatch',
         'browserify:tests',
         'watch:skin',
         'watch:lang',
@@ -448,6 +447,24 @@ module.exports = function(grunt) {
       }
     },
     shell: {
+      rollup: {
+        command: 'npm run rollup',
+        options: {
+          preferLocal: true
+        }
+      },
+      rollupall: {
+        command: 'npm run rollup -- --no-progress && npm run rollup-minify -- --no-progress',
+        options: {
+          preferLocal: true
+        }
+      },
+      rollupwatch: {
+        command: 'npm run rollup-dev',
+        optoins: {
+          preferLocal: true
+        }
+      },
       babel: {
         command: 'npm run babel -- --watch',
         options: {
@@ -509,12 +526,7 @@ module.exports = function(grunt) {
     'shell:lint',
     'clean:build',
 
-    'babel:es5',
-    'browserify:build',
-    'browserify:buildnovtt',
-    'usebanner:novtt',
-    'usebanner:vtt',
-    'uglify',
+    'shell:rollupall',
 
     'skin',
     'version:css',

build/rollup.js

@@ -0,0 +1,205 @@
+import { rollup } from 'rollup';
+import duration from 'humanize-duration';
+import watch from 'rollup-watch';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import json from 'rollup-plugin-json';
+import filesize from 'rollup-plugin-filesize';
+import progress from 'rollup-plugin-progress';
+import ignore from 'rollup-plugin-ignore';
+import uglify from 'rollup-plugin-uglify';
+import minimist from 'minimist';
+import _ from 'lodash';
+import pkg from '../package.json';
+import fs from 'fs';
+
+const args = minimist(process.argv.slice(2), {
+  boolean: ['watch', 'minify', 'progress'],
+  default: {
+    progress: true
+  },
+  alias: {
+    w: 'watch',
+    m: 'minify',
+    p: 'progress'
+  }
+});
+
+const compiledLicense = _.template(fs.readFileSync('./build/license-header.txt', 'utf8'));
+const bannerData = _.pick(pkg, ['version', 'copyright']);
+
+const primedResolve = resolve({
+  jsnext: true,
+  main: true,
+  browser: true
+});
+const primedCjs = commonjs({
+  sourceMap: false
+});
+const primedBabel = babel({
+  babelrc: false,
+  exclude: 'node_modules/**',
+  presets: [
+    'es3',
+    ['es2015', {
+      loose: true,
+      modules: false
+    }]
+  ],
+  plugins: ['external-helpers']
+});
+
+const es = {
+  options: {
+    entry: 'src/js/video.js',
+    plugins: [
+      json(),
+      primedBabel,
+      args.progress ? progress() : {},
+      filesize()
+    ],
+    onwarn(warning) {
+      if (warning.code === 'UNUSED_EXTERNAL_IMPORT' ||
+          warning.code === 'UNRESOLVED_IMPORT') {
+        return;
+      }
+
+      // eslint-disable-next-line no-console
+      console.warn(warning.message);
+    },
+    legacy: true
+  },
+  banner: compiledLicense(Object.assign({includesVtt: true}, bannerData)),
+  format: 'es',
+  dest: 'dist/video.es.js'
+};
+
+const cjs = Object.assign({}, es, {
+  format: 'cjs',
+  dest: 'dist/video.cjs.js'
+});
+
+const umd = {
+  options: {
+    entry: 'src/js/video.js',
+    plugins: [
+      primedResolve,
+      json(),
+      primedCjs,
+      primedBabel,
+      args.progress ? progress() : {},
+      filesize()
+    ],
+    legacy: true
+  },
+  banner: compiledLicense(Object.assign({includesVtt: true}, bannerData)),
+  format: 'umd',
+  dest: 'dist/video.js'
+};
+
+const minifiedUmd = Object.assign({}, _.cloneDeep(umd), {
+  dest: 'dist/video.min.js'
+});
+
+minifiedUmd.options.plugins.splice(4, 0, uglify({
+  preserveComments: 'some',
+  screwIE8: false,
+  mangle: true,
+  compress: {
+    /* eslint-disable camelcase */
+    sequences: true,
+    dead_code: true,
+    conditionals: true,
+    booleans: true,
+    unused: true,
+    if_return: true,
+    join_vars: true,
+    drop_console: true
+    /* eslint-enable camelcase */
+  }
+}));
+
+const novttUmd = Object.assign({}, _.cloneDeep(umd), {
+  banner: compiledLicense(Object.assign({includesVtt: false}, bannerData)),
+  dest: 'dist/alt/video.novtt.js'
+});
+
+novttUmd.options.plugins.unshift(ignore(['videojs-vtt.js']));
+
+const minifiedNovttUmd = Object.assign({}, _.cloneDeep(minifiedUmd), {
+  banner: compiledLicense(Object.assign({includesVtt: false}, bannerData)),
+  dest: 'dist/alt/video.novtt.min.js'
+});
+
+minifiedNovttUmd.options.plugins.unshift(ignore(['videojs-vtt.js']));
+
+function runRollup({options, format, dest, banner}) {
+  rollup(options)
+  .then(function(bundle) {
+    bundle.write({
+      format,
+      dest,
+      banner,
+      moduleName: 'videojs',
+      sourceMap: false
+    });
+  }, function(err) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+  });
+}
+
+if (!args.watch) {
+  if (args.minify) {
+    runRollup(minifiedUmd);
+    runRollup(minifiedNovttUmd);
+  } else {
+    runRollup(es);
+    runRollup(cjs);
+    runRollup(umd);
+    runRollup(novttUmd);
+  }
+} else {
+  const props = ['format', 'dest', 'banner'];
+  const watchers = [
+    ['es', watch({rollup},
+                 Object.assign({},
+                               es.options,
+                               _.pick(es, props)))],
+    ['cjs', watch({rollup},
+                  Object.assign({},
+                                cjs.options,
+                                _.pick(cjs, props)))],
+    ['umd', watch({rollup},
+                  Object.assign({moduleName: 'videojs'},
+                                umd.options,
+                                _.pick(umd, props)))],
+    ['novtt', watch({rollup},
+                    Object.assign({moduleName: 'videojs'},
+                                  novttUmd.options,
+                                  _.pick(novttUmd, props)))]
+  ];
+
+  watchers.forEach(function([type, watcher]) {
+    watcher.on('event', (details) => {
+      if (details.code === 'BUILD_START') {
+        // eslint-disable-next-line no-console
+        console.log(`Bundling ${type}...`);
+        return;
+      }
+
+      if (details.code === 'BUILD_END') {
+        // eslint-disable-next-line no-console
+        console.log(`Bundled ${type} in %s`, duration(details.duration));
+        return;
+      }
+
+      if (details.code === 'ERROR') {
+        // eslint-disable-next-line no-console
+        console.error(details.error.toString());
+        return;
+      }
+    });
+  });
+}