switch to rollup for easier build config

gulpfile.js

@@ -3,8 +3,12 @@ const path = require('path')
 const glob = require('glob')
 const yargs = require('yargs')
 const colors = require('colors')
-const webpack = require('webpack-stream')
-const { runQunitPuppeteer, printResultSummary, printFailedTests } = require('node-qunit-puppeteer')
+const qunit = require('node-qunit-puppeteer')
+
+const {rollup} = require('rollup');
+const {terser} = require('rollup-plugin-terser');
+const babel = require('rollup-plugin-babel');
+const resolve = require('@rollup/plugin-node-resolve');
 
 const gulp = require('gulp')
 const tap = require('gulp-tap')
@@ -12,8 +16,6 @@ const zip = require('gulp-zip')
 const sass = require('gulp-sass')
 const header = require('gulp-header')
 const eslint = require('gulp-eslint')
-const uglify = require('gulp-uglify')
-const rename = require('gulp-rename')
 const minify = require('gulp-clean-css')
 const connect = require('gulp-connect')
 const autoprefixer = require('gulp-autoprefixer')
@@ -21,65 +23,83 @@ const autoprefixer = require('gulp-autoprefixer')
 const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
 
-const license = `/*!
-* reveal.js <%= pkg.version %> (<%= new Date().toDateString() %>)
-* <%= pkg.homepage %>
+const banner = `/*!
+* reveal.js ${pkg.version} (${new Date().toDateString()})
+* ${pkg.homepage}
 * MIT licensed
 *
 * Copyright (C) 2020 Hakim El Hattab, https://hakim.se
 */\n`
 
-
-const swallowError = function(error) {
-  console.log(error.toString())
-  this.emit('end')
-}
-
-gulp.task('js', () => gulp.src(['./js/index.js'])
-        .pipe(webpack(require('./webpack.config.js')))
-        .on('error', swallowError)
-        .pipe(header(license, {pkg: pkg}))
-        .pipe(rename('reveal.min.js'))
-        .pipe(gulp.dest('./dist')))
-
-gulp.task('plugins', () => gulp.src(['./js/index.js'])
-        .pipe(webpack({
-            ...require('./webpack.config.js'),
-            entry: {
-                'highlight': './plugin/highlight/highlight.es5',
-                'markdown': './plugin/markdown/markdown.es5',
-                'search': './plugin/search/search.es5',
-                'notes': './plugin/notes/notes.es5',
-                'zoom': './plugin/zoom/zoom.es5',
-                'math': './plugin/math/math.es5'
-            },
-            output: {
-                filename: '[name].js'
+const rollupConfig = {
+    plugins: [
+        babel({
+            exclude: 'node_modules/**',
+            compact: false,
+            presets: [
+                [
+                    '@babel/preset-env',
+                    {
+                        corejs: 3,
+                        useBuiltIns: 'entry',
+                        modules: false
                     }
-        }))
-        .on('error', swallowError)
-        .pipe(gulp.dest('./dist/plugin')))
+                ]
+            ]
+        }),
+        resolve(),
+        terser()
+    ]
+};
+
+gulp.task('js', () => {
+    return rollup({
+        input: 'js/index.js',
+        ...rollupConfig
+    }).then( bundle => {
+        bundle.write({
+            file: './dist/reveal.min.js',
+            format: 'umd',
+            banner: banner
+        });
+    });
+})
+
+gulp.task('plugins', () => {
+    return Promise.all([
+        { input: './plugin/highlight/highlight.es5', output: './dist/plugin/highlight.js' },
+        { input: './plugin/markdown/markdown.es5', output: './dist/plugin/markdown.js' },
+        { input: './plugin/search/search.es5', output: './dist/plugin/search.js' },
+        { input: './plugin/notes/notes.es5', output: './dist/plugin/notes.js' },
+        { input: './plugin/zoom/zoom.es5', output: './dist/plugin/zoom.js' },
+        { input: './plugin/math/math.es5', output: './dist/plugin/math.js' }
+    ].map( plugin => {
+        return rollup({
+                input: plugin.input,
+                ...rollupConfig
+            }).then( bundle => {
+                return bundle.write({
+                    file: plugin.output,
+                    format: 'umd'
+                })
+            });
+    } ));
+})
 
 gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
         .pipe(sass())
         .pipe(gulp.dest('./dist/theme')))
 
-gulp.task('css-core', gulp.series(
-
-    () => gulp.src(['css/reveal.scss'])
+gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
     .pipe(sass())
     .pipe(autoprefixer())
-        .pipe(gulp.dest('./dist')),
-    () => gulp.src(['dist/reveal.css'])
     .pipe(minify({compatibility: 'ie9'}))
-        .pipe(header(license, {pkg: pkg}))
-        .pipe(gulp.dest('./dist'))
-
-))
+    .pipe(header(banner))
+    .pipe(gulp.dest('./dist')))
 
 gulp.task('css', gulp.parallel('css-themes', 'css-core'))
 
-gulp.task('test-qunit', function() {
+gulp.task('qunit', () => {
 
     let serverConfig = {
         root,
@@ -97,7 +117,7 @@ gulp.task('test-qunit', function() {
 
     let tests = Promise.all( testFiles.map( filename => {
         return new Promise( ( resolve, reject ) => {
-            runQunitPuppeteer({
+            qunit.runQunitPuppeteer({
                 targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`,
                 timeout: 20000,
                 redirectConsole: false,
@@ -106,8 +126,8 @@ gulp.task('test-qunit', function() {
                 .then(result => {
                     if( result.stats.failed > 0 ) {
                         console.log(`${'!'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.red);
-                        // printResultSummary(result, console);
-                        printFailedTests(result, console);
+                        // qunit.printResultSummary(result, console);
+                        qunit.printFailedTests(result, console);
                     }
                     else {
                         console.log(`${'✔'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.green);
@@ -146,14 +166,13 @@ gulp.task('test-qunit', function() {
     } );
 } )
 
-gulp.task('test', gulp.series(
+gulp.task('eslint', () => gulp.src(['./js/**', 'gulpfile.js'])
+        .pipe(eslint())
+        .pipe(eslint.format()))
 
-    () => gulp.src(['./js/**', 'gulpfile.js']).pipe(eslint()).pipe(eslint.format()),
-    'test-qunit'
+gulp.task('test', gulp.series( 'eslint', 'qunit' ))
 
-))
-
-gulp.task('default', gulp.series(gulp.parallel('js', 'css'), 'test'))
+gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
 
 gulp.task('build', gulp.parallel('js', 'css'))
 
@@ -181,6 +200,8 @@ gulp.task('serve', () => {
 
     gulp.watch(['js/**'], gulp.series('js', 'test'))
 
+    gulp.watch(['plugin/**/*.js'], gulp.series('plugins'))
+
     gulp.watch(['test/*.html'], gulp.series('test'))
 
     gulp.watch([

package.json

@@ -26,30 +26,29 @@
   "devDependencies": {
     "@babel/core": "^7.8.7",
     "@babel/preset-env": "^7.8.7",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
     "colors": "^1.4.0",
     "express": "^4.17.1",
     "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
-    "gulp-babel": "^8.0.0",
     "gulp-clean-css": "^4.2.0",
     "gulp-connect": "^5.7.0",
     "gulp-eslint": "^6.0.0",
     "gulp-header": "^2.0.9",
-    "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.0.2",
     "gulp-tap": "^2.0.0",
-    "gulp-uglify": "^3.0.2",
     "gulp-zip": "^5.0.1",
     "mustache": "^4.0.0",
     "node-qunit-puppeteer": "^2.0.1",
+    "rollup": "^2.6.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-terser": "^5.3.0",
     "socket.io": "^2.3.0",
-    "webpack-stream": "^5.2.1",
     "yargs": "^15.1.0"
   },
-  "browserslist": "last 2 versions, > 0.5%, not dead",
+  "browserslist": "> 0.5%, IE 11, not dead",
   "eslintConfig": {
     "env": {
       "browser": true,
@@ -89,6 +88,6 @@
     }
   },
   "dependencies": {
-    "highlight.js": "^9.18.1"
+    "core-js": "^3.6.5"
   }
 }

webpack.config.js

@@ -1,24 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  mode: 'production',
-  entry: ['./js/index.js'],
-  output: {
-    path: path.join(__dirname, '/dist'),
-    filename: 'reveal.min.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules)/,
-        loader: 'babel-loader',
-        query: {
-          presets: [
-            [ '@babel/preset-env' ]
-          ]
-        }
-      }
-    ]
-  }
-};