const pkg = require('./package.json') const path = require('path') const glob = require('glob') const yargs = require('yargs') const colors = require('colors') const through = require('through2'); const qunit = require('node-qunit-puppeteer') const {rollup} = require('rollup') const {terser} = require('rollup-plugin-terser') const babel = require('@rollup/plugin-babel').default const commonjs = require('@rollup/plugin-commonjs') const resolve = require('@rollup/plugin-node-resolve').default const sass = require('sass') const gulp = require('gulp') const tap = require('gulp-tap') const zip = require('gulp-zip') const header = require('gulp-header') const eslint = require('gulp-eslint') const minify = require('gulp-clean-css') const connect = require('gulp-connect') const autoprefixer = require('gulp-autoprefixer') const root = yargs.argv.root || '.' const port = yargs.argv.port || 8000 const banner = `/*! * reveal.js ${pkg.version} * ${pkg.homepage} * MIT licensed * * Copyright (C) 2020 Hakim El Hattab, https://hakim.se */\n` // Prevents warnings from opening too many test pages process.setMaxListeners(20); const babelConfig = { babelHelpers: 'bundled', ignore: ['node_modules'], compact: false, extensions: ['.js', '.html'], plugins: [ 'transform-html-import-to-string' ], presets: [[ '@babel/preset-env', { corejs: 3, useBuiltIns: 'usage', modules: false } ]] }; // Our ES module bundle only targets newer browsers with // module support. Browsers are targeted explicitly instead // of using the "esmodule: true" target since that leads to // polyfilling older browsers and a larger bundle. const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) ); babelConfigESM.presets[0][1].targets = { browsers: [ 'last 2 Chrome versions', 'last 2 Safari versions', 'last 2 iOS versions', 'last 2 Firefox versions', 'last 2 Edge versions', ] }; let cache = {}; // Creates a bundle with broad browser support, exposed // as UMD gulp.task('js-es5', () => { return rollup({ cache: cache.umd, input: 'js/index.js', plugins: [ resolve(), commonjs(), babel( babelConfig ), terser() ] }).then( bundle => { cache.umd = bundle.cache; return bundle.write({ name: 'Reveal', file: './dist/reveal.js', format: 'umd', banner: banner, sourcemap: true }); }); }) // Creates an ES module bundle gulp.task('js-es6', () => { return rollup({ cache: cache.esm, input: 'js/index.js', plugins: [ resolve(), commonjs(), babel( babelConfigESM ), terser() ] }).then( bundle => { cache.esm = bundle.cache; return bundle.write({ file: './dist/reveal.esm.js', format: 'es', banner: banner, sourcemap: true }); }); }) gulp.task('js', gulp.parallel('js-es5', 'js-es6')); // Creates a UMD and ES module bundle for each of our // built-in plugins gulp.task('plugins', () => { return Promise.all([ { name: 'RevealHighlight', input: './plugin/highlight/plugin.js', output: './plugin/highlight/highlight' }, { name: 'RevealMarkdown', input: './plugin/markdown/plugin.js', output: './plugin/markdown/markdown' }, { name: 'RevealSearch', input: './plugin/search/plugin.js', output: './plugin/search/search' }, { name: 'RevealNotes', input: './plugin/notes/plugin.js', output: './plugin/notes/notes' }, { name: 'RevealZoom', input: './plugin/zoom/plugin.js', output: './plugin/zoom/zoom' }, { name: 'RevealMath', input: './plugin/math/plugin.js', output: './plugin/math/math' }, ].map( plugin => { return rollup({ cache: cache[plugin.input], input: plugin.input, plugins: [ resolve(), commonjs(), babel({ ...babelConfig, ignore: [/node_modules\/(?!(highlight\.js|marked)\/).*/], }), terser() ] }).then( bundle => { cache[plugin.input] = bundle.cache; bundle.write({ file: plugin.output + '.esm.js', name: plugin.name, format: 'es' }) bundle.write({ file: plugin.output + '.js', name: plugin.name, format: 'umd' }) }); } )); }) // a custom pipeable step to transform Sass to CSS function compileSass() { return through.obj( ( vinylFile, encoding, callback ) => { const transformedFile = vinylFile.clone(); sass.render({ data: transformedFile.contents.toString(), includePaths: ['css/', 'css/theme/template'] }, ( err, result ) => { if( err ) { console.log( vinylFile.path ); console.log( err.formatted ); } else { transformedFile.extname = '.css'; transformedFile.contents = result.css; callback( null, transformedFile ); } }); }); } gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}']) .pipe(compileSass()) .pipe(gulp.dest('./dist/theme'))) gulp.task('css-core', () => gulp.src(['css/reveal.scss']) .pipe(compileSass()) .pipe(autoprefixer()) .pipe(minify({compatibility: 'ie9'})) .pipe(header(banner)) .pipe(gulp.dest('./dist'))) gulp.task('css', gulp.parallel('css-themes', 'css-core')) gulp.task('qunit', () => { let serverConfig = { root, port: 8009, host: 'localhost', name: 'test-server' } let server = connect.server( serverConfig ) let testFiles = glob.sync('test/*.html' ) let totalTests = 0; let failingTests = 0; let tests = Promise.all( testFiles.map( filename => { return new Promise( ( resolve, reject ) => { qunit.runQunitPuppeteer({ targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`, timeout: 20000, redirectConsole: false, puppeteerArgs: ['--allow-file-access-from-files'] }) .then(result => { if( result.stats.failed > 0 ) { console.log(`${'!'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.red); // qunit.printResultSummary(result, console); qunit.printFailedTests(result, console); } else { console.log(`${'✔'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.green); } totalTests += result.stats.total; failingTests += result.stats.failed; resolve(); }) .catch(error => { console.error(error); reject(); }); } ) } ) ); return new Promise( ( resolve, reject ) => { tests.then( () => { if( failingTests > 0 ) { reject( new Error(`${failingTests}/${totalTests} tests failed`.red) ); } else { console.log(`${'✔'} Passed ${totalTests} tests`.green.bold); resolve(); } } ) .catch( () => { reject(); } ) .finally( () => { server.close(); } ); } ); } ) gulp.task('eslint', () => gulp.src(['./js/**', 'gulpfile.js']) .pipe(eslint()) .pipe(eslint.format())) gulp.task('test', gulp.series( 'eslint', 'qunit' )) gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test')) gulp.task('build', gulp.parallel('js', 'css', 'plugins')) gulp.task('package', gulp.series('default', () => gulp.src([ './index.html', './dist/**', './lib/**', './images/**', './plugin/**', './**.md' ]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./')) )) gulp.task('reload', () => gulp.src(['*.html', '*.md']) .pipe(connect.reload())); gulp.task('serve', () => { connect.server({ root: root, port: port, host: 'localhost', livereload: true }) gulp.watch(['*.html', '*.md'], gulp.series('reload')) gulp.watch(['js/**'], gulp.series('js', 'reload', 'test')) gulp.watch(['plugin/**/plugin.js'], gulp.series('plugins', 'reload')) gulp.watch([ 'css/theme/source/*.{sass,scss}', 'css/theme/template/*.{sass,scss}', ], gulp.series('css-themes', 'reload')) gulp.watch([ 'css/*.scss', 'css/print/*.{sass,scss,css}' ], gulp.series('css-core', 'reload')) gulp.watch(['test/*.html'], gulp.series('test')) })