- the creation of a ES5 version of the bundler
- the creation of a single CSS file from a set of CSS or Stylus files (with support for creating multiple CSS themes easily).
redsift-bundler comes in two flavours. You can either use it as a standalone tool which makes it easy to quickly build an app/lib from the command line. The standalone tool can also be integrated into your NPM workflow e.g. as
npm build command.
The second, more flexible alternative is to integrate the bundling functionaltiy via the Gulp build tool. Simply use our handy Gulp tasks directly in your
The setup of the distribution bundle is done in a single configuration file for the standalone usage, as well as for using the gulp tasks. See below on how to configure your application/library.
gulpfile becomes tedious when you enhance or fix something, because every
gulpfile in each repository has to be updated. The
redsift-bundler solves this problem. Include it in your project as NPM module and simply update the module, if necessary.
If you are using the bundler on the command line install it globally:
npm install -g @redsift/redsift-bundler
When using it directly with
gulp do a project local installation:
npm install --save-dev @redsift/redsift-bundler
Command line usage
Usage: redsift-bundler -c [config-file]Options:-c Bundle configuration file [required]
CAUTION: For the
redsift-bundlerexecutable to exist it has to be installed globally before!
The bundler needs a configuration file which is oriented very close to the configuration properties of Rollup. Have a look at Rollup's documentation to understand the used options in detail.
Usage as NPM command
To be able to run the bundler as NPM command add the following configuration to your
package.json file within the
"scripts":"build": "redsift-bundler -c ./bundle.config.js"...
If you prefer not to use the globally installed version of the bundler for the NPM command install it locally first and use this configuration:
"scripts":"build": "./node_modules/@redsift/redsift-bundler -c ./bundle.config.js"...
This allows you to call
npm run build
in the project folder to create the bundle(s).
Using the gulp tasks directly (fastest and most flexible)
If you already have a Gulpfile (or simply want to use Gulp instead of the standalone bundler) add the following lines to your
var RSBundler = ;var bundleConfig = ;gulp;gulp;gulp;
bundle-js) and CSS (
bundle-css) and sets them up with the
gulp build will run both tasks and prints a bundle summary after a successful build.
./src/js/index.js and the Stylus file
./src/styles/index.styl and outputs the bundled files into
./dist/mybundle. The folder will contain a
js and a
window.MyBundle after importing the bundle.
For a another simple example have a look at the @redsift/ui-rs-core repository.
A real world example with multiple bundles, multiple themes and external mappings is available in the @redsift/redsift-ui repository.