https://github.com/userfrosting/gulp-uf-bundle-assets
Orchastrates JS and CSS bundle creation in an efficient and configurable manner.
https://github.com/userfrosting/gulp-uf-bundle-assets
userfrosting userfrosting-component
Last synced: 6 days ago
JSON representation
Orchastrates JS and CSS bundle creation in an efficient and configurable manner.
- Host: GitHub
- URL: https://github.com/userfrosting/gulp-uf-bundle-assets
- Owner: userfrosting
- License: mit
- Created: 2017-02-10T09:25:15.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2026-05-22T08:18:03.000Z (27 days ago)
- Last Synced: 2026-05-22T15:43:26.306Z (27 days ago)
- Topics: userfrosting, userfrosting-component
- Language: TypeScript
- Homepage:
- Size: 5.79 MB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# [gulp](https://github.com/gulpjs/gulp)-bundle-assets
| Branch | Status |
| ------ | ------ |
| master | [](https://github.com/userfrosting/gulp-uf-bundle-assets/actions?query=branch:master+workflow:"Continuous+Integration") [](https://codecov.io/gh/userfrosting/gulp-uf-bundle-assets/branch/master) |
Orchestrates JS and CSS bundle creation in an efficient and configurable manner.
## Install
```bash
npm i -D @userfrosting/gulp-bundle-assets
```
## Usage
```js
// gulpfile.mjs
import { BundleOrchestrator } from "@userfrosting/gulp-bundle-assets";
import Gulp from "gulp";
import cleanCss from "gulp-clean-css";
import concatCss from "gulp-concat-css";
import uglify from "gulp-uglify";
import concatJs from "gulp-concat-js";
export function bundle() {
const config = {
bundle: {
example: {
scripts: [
"foo.js",
"bar.js"
],
styles: [
"foo.css",
"bar.css"
]
}
}
};
const joiner = {
Scripts(bundleStream, name) {
return bundleStream
.pipe(concatJs(name + ".js"))// example.js
.pipe(uglify());
},
Styles(bundleStream, name) {
return bundleStream
.pipe(concatCss(name + ".css"))// example.css
.pipe(cleanCss());
}
};
return Gulp.src("src/**")
.pipe(new BundleOrchestrator(config, joiner))
.pipe(Gulp.dest("public/assets/"));
}
```
```bash
$ gulp bundle
```
### CJS Interoperability
This is an ES module package targeting NodeJS `>=22.0.0`, it can be used in CJS contexts via dynamic `import`. Note that ESM loaders like `@babel/loader` or `esm` likely won't work as expected.
```js
// gulpfile.cjs
// ...
module.exports.bundle = async function bundle() {
const { BundleOrchestrator } = await import("@userfrosting/gulp-bundle-assets");
// ...
}
```
## Integrating bundles into your app
A results callback can be provided as a third parameter. On completion, it will be provided with a mapping for bundles to their respective virtual file paths. Note that path transformations performed after the bundler (including `dest`) won't be reflected and should be accounted for.
The "DIY" approach to bundle resulting mapping is used to permit deeper integration with any system, such as generating a file in the target language to decrease integration cost.
## API
See [docs/api](./docs/api/index.md).
## Origins
This plugin was originally forked from [gulp-bundle-assets](https://github.com/dowjones/gulp-bundle-assets) to fix a CSS import bug. It has since undergone numerous refactors to improve performance and flexibility.
## License
[MIT](LICENSE)
## Contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md).