{"id":23666567,"url":"https://github.com/redsift/redsift-bundler","last_synced_at":"2025-07-09T10:36:47.150Z","repository":{"id":65603712,"uuid":"59481619","full_name":"redsift/redsift-bundler","owner":"redsift","description":"Package up your ES2015/Stylus/CSS application for distribution.","archived":false,"fork":false,"pushed_at":"2019-02-26T16:57:44.000Z","size":1271,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-02-14T20:40:47.067Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://redsift.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redsift.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-23T12:39:05.000Z","updated_at":"2016-12-16T14:47:25.000Z","dependencies_parsed_at":"2023-01-31T11:00:59.655Z","dependency_job_id":null,"html_url":"https://github.com/redsift/redsift-bundler","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fredsift-bundler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fredsift-bundler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fredsift-bundler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fredsift-bundler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redsift","download_url":"https://codeload.github.com/redsift/redsift-bundler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239674875,"owners_count":19678487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-29T07:33:09.538Z","updated_at":"2025-02-19T14:27:46.617Z","avatar_url":"https://github.com/redsift.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redsift-bundler\n\n`redsift-bundler` is a collection of functionality which takes care of the bundling and building process of a Javascript ES2015 application. It supports\n\n* bundling of an ES2015 Javascript application/library into a single ES2015 file for distribution\n* the creation of a ES5 version of the bundler\n* the creation of a single CSS file from a set of CSS or [Stylus](stylus-lang.com) files (with support for creating multiple CSS themes easily).\n\n`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.\n\nThe second, more flexible alternative is to integrate the bundling functionaltiy via the [Gulp](http://gulpjs.com/) build tool. Simply use our handy Gulp tasks directly in your `gulpfile`.\n\nThe 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.\n\nThe idea of this bundler is to have a central tool which takes care of the repetitive task of creating distribution bundles from a Javascript application/library. Maintaining the build process of many different Javascript projects e.g. with a `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.\n\n# Installation\n\nIf you are using the bundler on the command line install it globally:\n\n```bash\nnpm install -g @redsift/redsift-bundler\n```\n\nWhen using it directly with `gulp` do a project local installation:\n\n```bash\nnpm install --save-dev @redsift/redsift-bundler\n```\n\n# Command line usage\n\n```bash\nUsage: redsift-bundler -c [config-file]\n\nOptions:\n  -c  Bundle configuration file [required]\n```\n\n\u003e CAUTION: For the `redsift-bundler` executable to exist it has to be installed globally before!\n\nThe bundler needs a configuration file which is oriented very close to the configuration properties of [Rollup](http://rollupjs.org/). Have a look at Rollup's documentation to understand the used options in detail.\n\n# Usage as NPM command\n\nTo be able to run the bundler as NPM command add the following configuration to your `package.json` file within the `script` section:\n\n```javascript\n\"scripts\": {\n    \"build\": \"redsift-bundler -c ./bundle.config.js\",\n    ...\n  }\n```\n\nIf you prefer not to use the globally installed version of the bundler for the NPM command install it locally first and use this configuration:\n\n```javascript\n\"scripts\": {\n    \"build\": \"./node_modules/@redsift/redsift-bundler -c ./bundle.config.js\",\n    ...\n  }\n```\n\nThis allows you to call\n\n```bash\nnpm run build\n```\n\nin the project folder to create the bundle(s).\n\n# Using the gulp tasks directly (fastest and most flexible)\n\nIf you already have a Gulpfile (or simply want to use Gulp instead of the standalone bundler) add the following lines to your `gulpfile`:\n\n```javascript\nvar RSBundler = require('@redsift/redsift-bundler');\nvar bundleConfig = require('./bundle.config.js');\n\ngulp.task('bundle-js', RSBundler.loadTask(gulp, 'bundle-js', bundleConfig));\ngulp.task('bundle-css', RSBundler.loadTask(gulp, 'bundle-css', bundleConfig));\n\ngulp.task('build', ['bundle-js', 'bundle-css'], function() {\n  console.log('\\n* Bundling complete:\\n');\n  RSBundler.printBundleSummary(bundleConfig);\n});\n```\n\n`RSBundler` takes care of loading the two tasks for bundling Javascript (`bundle-js`) and CSS (`bundle-css`) and sets them up with the `bundleConfig`. `gulp build` will run both tasks and prints a bundle summary after a successful build.\n\n## Configuration file\n\nThis example configuration file takes the ES2015 Javascript file `./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 `css` sub folder with the bundled files and outputs a non-minified and a minified version of the bundle together with sourcemaps. If your are bundling a library the exported Javascript functionality will be accessible via the global variable `window.MyBundle` after importing the bundle.\n\n```javascript\nvar paths = {\n  dest: './dist'\n}\n\n// We create a single bundle:\nvar myBundleConfig = {\n  // the Javascript index file. Output Javascript will be written to a file with the given 'name' within 'outputFolder/js'\n  mainJS: {\n    name: 'mybundle',\n    indexFile: './src/js/index.js'\n  },  \n  // the CSS/Stylus index file. Output CSS will be written to a file with the given 'name' within 'outputFolder/css'\n  // multiple output files can be created, e.g. to create multiple CSS themes (see the real-world example below)\n  styles: [{\n    name: 'mybundle',\n    indexFile: './src/index.styl'\n  }],\n  // list of formats which are going to be created. Valid formats are described in the Rollup documentation\n  formats: ['es6', 'umd'],\n  // the output folder of the bundle\n  outputFolder: paths.dest,\n  // the module name that the exported JS code will be accessible at in the global namespace. Used by 'umd' and 'cjs' export formats (no function for 'es6' export)\n  moduleNameJS: 'MyBundle',\n  // The destination of the sourcemaps relative to 'outputFolder'\n  mapsDest: '.',\n  // external mappings allow you to exclude the bundling of the named libraries. See the 'real world' example and the\n  // Rollup documentation regarding this option. For the simple example we are including everything into the bundle, so\n  // there is no need for that here.\n  externalMappings: {\n    // 'd3': 'd3'\n  }\n};\n\n// export the config as array. Multiple bundles can be defined (see real-world example below)\nmodule.exports = [ myBundleConfig ];\n```\n\nFor a another simple example have a look at the [@redsift/ui-rs-core](https://github.com/Redsift/ui-rs-core/blob/master/bundle.config.js) repository.\n\nA real world example with multiple bundles, multiple themes and external mappings is available in the [@redsift/redsift-ui](https://github.com/Redsift/redsift-ui/blob/master/redsift-ui.config.js) repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsift%2Fredsift-bundler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredsift%2Fredsift-bundler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsift%2Fredsift-bundler/lists"}