1.2.2 • Published 5 years ago
rollup-vinyl-stream2 v1.2.2
rollup-vinyl-stream2
This is a wrapper around Rollup that returns a readable vinyl stream and makes using Rollup with gulp easier.
This package is based on rollup-stream and rollup-vinyl-stream, and has been
modified to include Rollup as a peer-dependency as well as to support
multiple outputs with the Rollup output options and / or the new experimental
option experimentalCodeSplitting
.
The options object is passed to Rollup's rollup() and generate() methods. This currently works because there's no overlap between the names of the options those methods take. Hopefully that won't change any time soon!
Installation
npm install --save-dev rollup rollup-vinyl-stream2
or
yarn add rollup rollup-vinyl-stream2
Basic usage
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
gulp.task('rollup', () =>
rollupStream({
input: './src/main.js',
output: {
format: 'umd',
},
})
// Output to ./dist/main.js
.pipe(gulp.dest('./dist'))
);
Multiple inputs with code splitting
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
gulp.task('rollup', () =>
rollupStream({
input: [
'./src/main.js',
'./src/entry2.js',
'./src/entry3.js'
],
output: {
format: 'umd',
},
inlineDynamicImports: true,
})
// Output to ./dist/main.js
.pipe(gulp.dest('./dist'))
);
Multiple outputs
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
gulp.task('rollup', () =>
rollupStream({
input: './src/index.js',
output: [
{
file: 'index.es.js',
format: 'es',
},
{
file: 'index.system.js',
format: 'system',
},
],
})
.pipe(gulp.dest('./dist'))
);
Multiple inputs and multiple targets
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
gulp.task('rollup', () =>
rollupStream({
input: [
'./src/main.js',
'./src/entry2.js',
'./src/entry3.js'
],
output: [
{
dir: 'js2015',
format: 'es',
},
{
dir: 'js',
format: 'system',
},
],
inlineDynamicImports: true,
})
.pipe(gulp.dest('./dist'))
);
Usage with sourcemaps
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('rollup', () =>
rollupStream({
input: './src/main.js',
output: {
sourcemap: true,
},
})
// tell gulp-sourcemaps to load the sourcemaps produced by rollup-vinyl-stream2.
.pipe(sourcemaps.init({ loadMaps: true }))
// write the sourcemap alongside the output file.
.pipe(sourcemaps.write('.'))
// and output to ./dist/main.js as normal.
.pipe(gulp.dest('./dist'))
);
Usage with Rollup config file
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
gulp.task('rollup', () =>
rollupStream({ config: './rollup.config.js' })
.pipe(gulp.dest('./dist'))
);
or for compatibility with rollup-stream
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
gulp.task('rollup', () =>
rollupStream('./rollup.config.js')
.pipe(gulp.dest('./dist'))
);
Usage with caching
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
let cache;
gulp.task('rollup', () =>
rollupStream({
input: './src/main.js',
cache,
})
.on('bundle', (bundle) => cache = bundle)
.pipe(gulp.dest('./dist'))
);
gulp.task('watch', () => {
gulp.watch('./src/**/*.js', gulp.series('rollup'));
});
Cache Options
const gulp = require('gulp');
const rollupStream = require('rollup-vinyl-stream2');
let options = { config: './rollup.config.js' };
gulp.task('rollup', () =>
rollupStream(options)
.on('config', (config) => options = config)
.on('bundle', (bundle) => options.cache = bundle)
.pipe(gulp.dest('./dist'))
);