Running Rollup with Gulp
Use Rollup.js as JavaScript bundler in your Gulp pipeline
Writing an SPA (Single Page Application) in JavaScript/CSS always means to keep an eye on small files to deliver. Especially when utilizing a bunch of libraries and frameworks, bundling is some sort of a must. The offer on bundlers and task runners is large on the web: WebPack, Snowpack, Browserify, Parcel, Grunt, Gulp and “DingDong” (just replace with the hotest new shit available).
But, it is not always necessary to replace your complete building pipeline, when the new “DingDong” is hyped in the media. Brave old tools like Gulp are doing their job pretty well … and you are able to integrate some more modern approaches on bundling JS, for example.
I couple of months ago, while working on a private project, I became attentive to Rollup.js, a next-generation JavaScript module bundler from Rich Harris, the author of Svelte. Rollup uses the new standardized format for code modules included in the ES6 revision of JavaScript and supports Tree-Shaking, which means that it analyzes all your ES6 imports
statements and bundles only the code which is used. Pretty cool … but … it is a JavaScript bundler only and there are no plugins for Gulp, my favourite task runner.
In this article I will show you, how to integrate Rollup in your Gulp bundling pipeline.
Install Rollup
Best practice is to install Rollup globally:
1 | npm install --global rollup |
The Gulp File
Starting point was my gulpfile.js
as follows:
1 | const { src, dest, watch, series, parallel } = require('gulp'); |
This pipeline only bundles CSS yet, when calling gulp
in the command line.
Calling Rollup for JS bundling
Rollup has dozens of parameters to define everything you need, but it also supports a config file, which allows you to configure everything there and run rollup -c
only. Very useful on this approach.
1 | export default { |
As there is no Gulp plugin for Rollup, we need to execute Rollup in the Gulp pipeline by command. For this I’ve created a helper in my gulpfile.js
, to be able to execute whichever command:
1 | let HELPERS = { |
This helper is used in a Gulp command function to call Rollup:
1 | function javascript() { |
The last thing I had to do, is to insert the command in the pipeline to run in parallel to the CSS bundling:
1 | exports.default = series(clean, parallel(css, javascript)); |
Pretty straightforward, isn’t it? Happy bundling with Rollup and Gulp…
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts or by replying to its syndication on Twitter, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments