2 years ago

Category: javascript, javascript

Recently I worked on https://barryvanveen.nl/blog/24-game-of-life-javascript-plugin. Because not all browsers support all features of ES2015, you need to compile it into "normal" JavaScript. Also, because the code is divided into modules, these need to be bundled.

From the rollup website: Rollup is a JavaScript module bundler.

And the gulpfile looks like this: var babel = require("gulp-babel"); var gulp = require('gulp'); var rename = require("gulp-rename"); var rollup = require('rollup-stream'); var sourcemaps = require('gulp-sourcemaps'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); gulp.task('build-js', function () { rollup({ entry: './src/gameoflife.js', sourceMap: true, format: 'iife', moduleName: 'GameOfLife', banner: `// GameOfLife JavaScript Plugin v1.0.3 // https://github.com/barryvanveen/gameoflife // // Released under the MIT license // http://choosealicense.com/licenses/mit/` }) .on('error', e => { console.error(`${e.stack}`); }) .pipe(source('gameoflife.js', './src')) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true})) .pipe(babel({presets: ['es2015']})) .pipe(rename('gameoflife.min.js')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist')); }); gulp.task('watch-js', function(){ gulp.watch('src/**/*.js', ['build-js']); }); gulp.task('default', ['build-js', 'watch-js']); Some points of interest: Rollup supports multiple output formats.