Smoothly integrates rollup
into a gulp
plugin.
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'));
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.
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.
Type: Plugin[]
Default: undefined
An array of rollup
plugins you want to use. @rbnlffl/rollup-plugin-eslint
, for example.
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
.
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.
Type: string
Default: 'es'
Controls in what format the code should be. Valid values are 'es'
, 'amd'
, 'cjs'
, 'iife'
, 'umd'
and 'system'
.
Type: string
Default: undefined
Used to define the name of your emitted iife
or umd
bundle.
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: '.'
}));
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.
MIT