gulp-bundle-assets

Branch	Status
master

Orchestrates JS and CSS bundle creation in an efficient and configurable manner.

Install

npm i -D  @userfrosting/gulp-bundle-assets

Usage

IMPORTANT
This is an ES module package targeting NodeJS ^12.17.0 || >=13.2.0, refer to the NodeJS ESM docs regarding how to correctly import. ESM loaders like @babel/loader or esm likely won't work as expected.

// gulpfile.mjs
import AssetBundler 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 AssetBundler(config, joiner))
        .pipe(Gulp.dest("public/assets/"));
}

$ gulp bundle

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.

Origins

This plugin was originally forked from gulp-bundle-assets to fix a CSS import bug. It has since undergone numerous refactors to improve performance and flexibility.

License

MIT

Contributing

See CONTRIBUTING.md.