@rollup/stream

🍣 Stream Rollup build results

This package exists to provide a streaming interface for Rollup builds. This is useful in situations where a build system is working with vinyl files, such as gulp.js.

Requirements

This plugin requires an LTS Node version (v8.0.0+) and Rollup v1.20.0+.

Install

Using npm:

npm install @rollup/stream --save-dev

Usage

Assume a src/index.js file exists and contains code like the following:

export default 'jingle bells, batman smells';

We can bundle src/index.js using streams such like:

import rollupStream from '@rollup/stream';

const { log } = console;
const options = {
  input: 'src/index.js',
  output: { format: 'cjs' }
};
const stream = rollupStream(options);
let bundle = '';

stream.on('data', (data) => bundle += data);
stream.on('end', () => log(bundle));

The preceding code will concatenate each chunk (or asset) and output the entire bundle's content when Rollup has completed bundling and the stream has ended.

Usage with Gulp

Using Gulp requires piping. Suppose one wanted to take the bundle content and run it through a minifier, such as terser:

import rollupStream from '@rollup/stream';
import gulp from 'gulp';
import terser from 'gulp-terser';
import source from 'vinyl-source-stream';

gulp.task('rollup', () => {
  const options = { input: 'src/index.js' };
  return rollupStream(options)
    .pipe(source('bundle.js'))
    .pipe(terser({ keep_fnames: true, mangle: false }))
    .pipe(gulp.dest('dist'));
});

Using Sourcemaps

Rollup can produce source maps by specifying the sourcemap output option. To use the generated sourcemaps with Gulp:

import rollupStream from '@rollup/stream';
import buffer from 'vinyl-buffer';
import gulp from 'gulp';
import sourcemaps from 'gulp-sourcemaps';
import source from 'vinyl-source-stream';

gulp.task('rollup', () => {
  const options = { input: 'src/index.js', output: { sourcemap: true } };
  return rollupStream(options)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('dist'))
    .pipe(gulp.dest('dist'));
});

Watching for changes

To optimize build times, you will need to make use of the cache option when watching for file changes:

import rollupStream from '@rollup/stream';
import buffer from 'vinyl-buffer';
import gulp from 'gulp';
import source from 'vinyl-source-stream';

// cache variable needs to be stored outside the gulp task
let cache;

gulp.task('rollup', () => {
  const options = {
    input: 'src/index.js',
    // Apply cache in the options object
    cache: cache,
  };
  return rollupStream(options)
    .on('bundle', bundle => {
      // Update the cache data after every new bundle is created
      cache = bundle;
    })
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('dist'));
});

gulp.task('watch', done => {

  // Gulp 4
  gulp.watch('./src/**/*.js', gulp.series('rollup'));

  // Gulp 3
  gulp.watch('./src/**/*.js', ['rollup']);

  done();
});

(Example reproduced from Rollup-Stream readme)

Options

All Rollup options are valid to pass as options to @rollup/stream.

Dan503/stream