選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

gulpfile.js 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. const pkg = require('./package.json')
  2. const path = require('path')
  3. const glob = require('glob')
  4. const yargs = require('yargs')
  5. const colors = require('colors')
  6. const through = require('through2');
  7. const qunit = require('node-qunit-puppeteer')
  8. const {rollup} = require('rollup')
  9. const {terser} = require('rollup-plugin-terser')
  10. const babel = require('@rollup/plugin-babel').default
  11. const commonjs = require('@rollup/plugin-commonjs')
  12. const resolve = require('@rollup/plugin-node-resolve').default
  13. const sass = require('sass')
  14. const gulp = require('gulp')
  15. const tap = require('gulp-tap')
  16. const zip = require('gulp-zip')
  17. const header = require('gulp-header')
  18. const eslint = require('gulp-eslint')
  19. const minify = require('gulp-clean-css')
  20. const connect = require('gulp-connect')
  21. const autoprefixer = require('gulp-autoprefixer')
  22. const root = yargs.argv.root || '.'
  23. const port = yargs.argv.port || 8000
  24. const host = yargs.argv.host || 'localhost'
  25. const banner = `/*!
  26. * reveal.js ${pkg.version}
  27. * ${pkg.homepage}
  28. * MIT licensed
  29. *
  30. * Copyright (C) 2011-2023 Hakim El Hattab, https://hakim.se
  31. */\n`
  32. // Prevents warnings from opening too many test pages
  33. process.setMaxListeners(20);
  34. const babelConfig = {
  35. babelHelpers: 'bundled',
  36. ignore: ['node_modules'],
  37. compact: false,
  38. extensions: ['.js', '.html'],
  39. plugins: [
  40. 'transform-html-import-to-string'
  41. ],
  42. presets: [[
  43. '@babel/preset-env',
  44. {
  45. corejs: 3,
  46. useBuiltIns: 'usage',
  47. modules: false
  48. }
  49. ]]
  50. };
  51. // Our ES module bundle only targets newer browsers with
  52. // module support. Browsers are targeted explicitly instead
  53. // of using the "esmodule: true" target since that leads to
  54. // polyfilling older browsers and a larger bundle.
  55. const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
  56. babelConfigESM.presets[0][1].targets = { browsers: [
  57. 'last 2 Chrome versions',
  58. 'last 2 Safari versions',
  59. 'last 2 iOS versions',
  60. 'last 2 Firefox versions',
  61. 'last 2 Edge versions',
  62. ] };
  63. let cache = {};
  64. // Creates a bundle with broad browser support, exposed
  65. // as UMD
  66. gulp.task('js-es5', () => {
  67. return rollup({
  68. cache: cache.umd,
  69. input: 'js/index.js',
  70. plugins: [
  71. resolve(),
  72. commonjs(),
  73. babel( babelConfig ),
  74. terser()
  75. ]
  76. }).then( bundle => {
  77. cache.umd = bundle.cache;
  78. return bundle.write({
  79. name: 'Reveal',
  80. file: './dist/reveal.js',
  81. format: 'umd',
  82. banner: banner,
  83. sourcemap: true
  84. });
  85. });
  86. })
  87. // Creates an ES module bundle
  88. gulp.task('js-es6', () => {
  89. return rollup({
  90. cache: cache.esm,
  91. input: 'js/index.js',
  92. plugins: [
  93. resolve(),
  94. commonjs(),
  95. babel( babelConfigESM ),
  96. terser()
  97. ]
  98. }).then( bundle => {
  99. cache.esm = bundle.cache;
  100. return bundle.write({
  101. file: './dist/reveal.esm.js',
  102. format: 'es',
  103. banner: banner,
  104. sourcemap: true
  105. });
  106. });
  107. })
  108. gulp.task('js', gulp.parallel('js-es5', 'js-es6'));
  109. // Creates a UMD and ES module bundle for each of our
  110. // built-in plugins
  111. gulp.task('plugins', () => {
  112. return Promise.all([
  113. { name: 'RevealHighlight', input: './plugin/highlight/plugin.js', output: './plugin/highlight/highlight' },
  114. { name: 'RevealMarkdown', input: './plugin/markdown/plugin.js', output: './plugin/markdown/markdown' },
  115. { name: 'RevealSearch', input: './plugin/search/plugin.js', output: './plugin/search/search' },
  116. { name: 'RevealNotes', input: './plugin/notes/plugin.js', output: './plugin/notes/notes' },
  117. { name: 'RevealZoom', input: './plugin/zoom/plugin.js', output: './plugin/zoom/zoom' },
  118. { name: 'RevealMath', input: './plugin/math/plugin.js', output: './plugin/math/math' },
  119. ].map( plugin => {
  120. return rollup({
  121. cache: cache[plugin.input],
  122. input: plugin.input,
  123. plugins: [
  124. resolve(),
  125. commonjs(),
  126. babel({
  127. ...babelConfig,
  128. ignore: [/node_modules\/(?!(highlight\.js|marked)\/).*/],
  129. }),
  130. terser()
  131. ]
  132. }).then( bundle => {
  133. cache[plugin.input] = bundle.cache;
  134. bundle.write({
  135. file: plugin.output + '.esm.js',
  136. name: plugin.name,
  137. format: 'es'
  138. })
  139. bundle.write({
  140. file: plugin.output + '.js',
  141. name: plugin.name,
  142. format: 'umd'
  143. })
  144. });
  145. } ));
  146. })
  147. // a custom pipeable step to transform Sass to CSS
  148. function compileSass() {
  149. return through.obj( ( vinylFile, encoding, callback ) => {
  150. const transformedFile = vinylFile.clone();
  151. sass.render({
  152. data: transformedFile.contents.toString(),
  153. file: transformedFile.path,
  154. }, ( err, result ) => {
  155. if( err ) {
  156. callback(err);
  157. }
  158. else {
  159. transformedFile.extname = '.css';
  160. transformedFile.contents = result.css;
  161. callback( null, transformedFile );
  162. }
  163. });
  164. });
  165. }
  166. gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
  167. .pipe(compileSass())
  168. .pipe(gulp.dest('./dist/theme')))
  169. gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
  170. .pipe(compileSass())
  171. .pipe(autoprefixer())
  172. .pipe(minify({compatibility: 'ie9'}))
  173. .pipe(header(banner))
  174. .pipe(gulp.dest('./dist')))
  175. gulp.task('css', gulp.parallel('css-themes', 'css-core'))
  176. gulp.task('qunit', () => {
  177. let serverConfig = {
  178. root,
  179. port: 8009,
  180. host: 'localhost',
  181. name: 'test-server'
  182. }
  183. let server = connect.server( serverConfig )
  184. let testFiles = glob.sync('test/*.html' )
  185. let totalTests = 0;
  186. let failingTests = 0;
  187. let tests = Promise.all( testFiles.map( filename => {
  188. return new Promise( ( resolve, reject ) => {
  189. qunit.runQunitPuppeteer({
  190. targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`,
  191. timeout: 20000,
  192. redirectConsole: false,
  193. puppeteerArgs: ['--allow-file-access-from-files']
  194. })
  195. .then(result => {
  196. if( result.stats.failed > 0 ) {
  197. console.log(`${'!'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.red);
  198. // qunit.printResultSummary(result, console);
  199. qunit.printFailedTests(result, console);
  200. }
  201. else {
  202. console.log(`${'✔'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.green);
  203. }
  204. totalTests += result.stats.total;
  205. failingTests += result.stats.failed;
  206. resolve();
  207. })
  208. .catch(error => {
  209. console.error(error);
  210. reject();
  211. });
  212. } )
  213. } ) );
  214. return new Promise( ( resolve, reject ) => {
  215. tests.then( () => {
  216. if( failingTests > 0 ) {
  217. reject( new Error(`${failingTests}/${totalTests} tests failed`.red) );
  218. }
  219. else {
  220. console.log(`${'✔'} Passed ${totalTests} tests`.green.bold);
  221. resolve();
  222. }
  223. } )
  224. .catch( () => {
  225. reject();
  226. } )
  227. .finally( () => {
  228. server.close();
  229. } );
  230. } );
  231. } )
  232. gulp.task('eslint', () => gulp.src(['./js/**', 'gulpfile.js'])
  233. .pipe(eslint())
  234. .pipe(eslint.format()))
  235. gulp.task('test', gulp.series( 'eslint', 'qunit' ))
  236. gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
  237. gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
  238. gulp.task('package', gulp.series(() =>
  239. gulp.src(
  240. [
  241. './index.html',
  242. './dist/**',
  243. './lib/**',
  244. './images/**',
  245. './plugin/**',
  246. './**/*.md'
  247. ],
  248. { base: './' }
  249. )
  250. .pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
  251. ))
  252. gulp.task('reload', () => gulp.src(['index.html'])
  253. .pipe(connect.reload()));
  254. gulp.task('serve', () => {
  255. connect.server({
  256. root: root,
  257. port: port,
  258. host: host,
  259. livereload: true
  260. })
  261. const slidesRoot = root.endsWith('/') ? root : root + '/'
  262. gulp.watch([
  263. slidesRoot + '**/*.html',
  264. slidesRoot + '**/*.md',
  265. `!${slidesRoot}**/node_modules/**`, // ignore node_modules
  266. ], gulp.series('reload'))
  267. gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
  268. gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
  269. gulp.watch([
  270. 'css/theme/source/**/*.{sass,scss}',
  271. 'css/theme/template/*.{sass,scss}',
  272. ], gulp.series('css-themes', 'reload'))
  273. gulp.watch([
  274. 'css/*.scss',
  275. 'css/print/*.{sass,scss,css}'
  276. ], gulp.series('css-core', 'reload'))
  277. gulp.watch(['test/*.html'], gulp.series('test'))
  278. })