1. rollup-stream
a wrapper around Rollup that returns a stream instead of a Promise
rollup-stream
Package: rollup-stream
Created by: permutatrix
Last modified: Sun, 26 Jun 2022 14:02:50 GMT
Version: 1.24.1
License: MIT
Downloads: 6,078
Repository: https://github.com/permutatrix/rollup-stream

Install

npm install rollup-stream
yarn add rollup-stream

rollup-stream npm Dependency Status Build Status

This is a simple wrapper around Rollup that returns a readable stream instead
of a Promise, like Browserify's bundle() method. It's designed to make using
Rollup with gulp easier, but if you find another use for it, go ahead!

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-stream

Basic usage

 var gulp = require('gulp'),
    rollup = require('rollup-stream'),
    source = require('vinyl-source-stream');

gulp.task('rollup', function() {
  return rollup({
      input: './src/main.js'
    })
    
    // give the file the name you want to output with.
    .pipe(source('app.js'))
    
    // and output to ./dist/app.js as normal.
    .pipe(gulp.dest('./dist'));
});

Usage with sourcemaps

 var gulp = require('gulp'),
    rollup = require('rollup-stream'),
    sourcemaps = require('gulp-sourcemaps'),
//  rename = require('gulp-rename'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer');

gulp.task('rollup', function() {
  return rollup({
      input: './src/main.js',
      sourcemap: true
    })
    
    // point to the entry file.
    .pipe(source('main.js', './src'))
    
    // buffer the output. most gulp plugins, including gulp-sourcemaps, don't support streams.
    .pipe(buffer())
    
    // tell gulp-sourcemaps to load the inline sourcemap produced by rollup-stream.
    .pipe(sourcemaps.init({loadMaps: true}))
        
        // transform the code further here.
        
    // if you want to output with a different name from the input file, use gulp-rename here.
//  .pipe(rename('index.js'))
    
    // write the sourcemap alongside the output file.
    .pipe(sourcemaps.write('.'))
    
    // and output to ./dist/main.js as normal.
    .pipe(gulp.dest('./dist'));
});

Usage with caching

 var gulp = require('gulp'),
    rollup = require('rollup-stream'),
    source = require('vinyl-source-stream');

var cache;
gulp.task('rollup', function() {
  return rollup({
      input: './src/main.js',
      cache: cache
    })
    
    .on('bundle', function(bundle) {
      cache = bundle;
    })
    
    // after listening for the 'bundle' event, proceed as usual.
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function() {
  gulp.watch('./src/**/*.js', ['rollup']);
});

Usage with newer, older, or custom Rollup

 var gulp = require('gulp'),
    rollup = require('rollup-stream'),
    source = require('vinyl-source-stream');

gulp.task('rollup', function() {
  return rollup({
      input: './src/main.js',
      rollup: require('rollup')
    })
    
    // after passing options.rollup, proceed as usual.
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist'));
});

Usage with Rollup config file

 var gulp = require('gulp'),
    rollup = require('rollup-stream'),
    source = require('vinyl-source-stream');

gulp.task('rollup', function() {
  return rollup('rollup.config.js')
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist'));
});

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin