@rbnlffl/gulp-rollup

@rbnlffl/gulp-rollup

An intuitive gulp wrapper around rollup. 🌯

Smoothly integrates rollup into a gulp plugin.

Setup

npm i @rbnlffl/gulp-rollup -D

const { src, dest } = require('gulp');
const rollup = require('@rbnlffl/gulp-rollup');

module.exports.js = () => src('source/js/index.js')
  .pipe(rollup())
  .pipe(dest('public/js'));

Config

The plugin takes two options objects and passes them unmodified down to rollup. The first object is of type InputOptions and the second one of type OutputOptions. Below you'll find the most common options.

inputOptions

These options handle how rollup should treat the input it's getting. Keep in mind that directly manipulating the input property is strongly discouraged, as this gets handled by the plugin itself. If you really want to or know what you're doing, you can still play around with it. I'm not the police or anything.

plugins

Type: Plugin[]
Default: undefined

An array of rollup plugins you want to use. @rbnlffl/rollup-plugin-eslint, for example.

external

Type: string, string[], RegExp or RegExp[]
Default: undefined

Instruct rollup what packages it should treat as external dependencies. An example could be core-js polyfills injected via @rollup/plugin-babel.

outputOptions

Tells rollup what the chunk it emits should look like. As with the inputOptions before, directly playing around with the dir, file and sourcemap properties is not recommended and can lead to unexpected side-effects.

format

Type: string
Default: 'es'

Controls in what format the code should be. Valid values are 'es', 'amd', 'cjs', 'iife', 'umd' and 'system'.

name

Type: string
Default: undefined

Used to define the name of your emitted iife or umd bundle.

An advanced example

The example below shows how you can integrate the plugin into the pipeline, how to conditionally generate source maps and how you could conditionally filter out rollup plugins.

const { src, dest } = require('gulp');
const plumber = require('gulp-plumber');
const rollup = require('@rbnlffl/gulp-rollup');
const eslint = require('@rbnlffl/rollup-plugin-eslint');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const buble = require('@rollup/plugin-buble');
const { terser } = require('rollup-plugin-terser');
const rename = require('gulp-rename');

const production = process.argv.includes('--prod');

module.exports.js = () => src('source/js/index.js', {
    sourcemaps: !production
  })
  .pipe(plumber())
  .pipe(rollup({
    plugins: [
      eslint(),
      nodeResolve(),
      commonjs(),
      production && buble(),
      production && terser()
    ].filter(plugin => plugin)
  }, {
    format: 'iife'
  }))
  .pipe(rename('bundle.js'))
  .pipe(dest('public/js', {
    sourcemaps: '.'
  }));

Why a new plugin?

Mainly because I don't like the API of gulp-rollup. Absolutely nothing wrong with it, just personal preference. Also because it's a nice excercise on understanding how both gulp and rollup work under the hood.

License

MIT