Bun-Bundler: Simple and Ultra-Fast HTML Bundler

Bun-Bundler is a powerful markup bundler designed for powerful devs. It offers a comprehensive solution for bundling and optimizing your web projects, with support for various technologies and features that streamline your development workflow.

Key Features

Pug / HTML templating
SCSS / CSS preprocessing
JavaScript bundling and optimization
SVG Sprite generation
Image optimizations for improved performance
Static assets handling
Real-time file watching and hot reloading for rapid development

Quick Start

Installation

Bun-Bundler works great with both Bun and Node.js. Install Bun-Bundler using npm or Bun:

npm install bun-bundler or bun add bun-bundler

Dev bundling example (File watching & Hot Reload)

Create file dev.js, or name it whatever you want.
Here's the full config below that you can use as a template.

import Bundler from 'bun-bundler';
import { ImageProcessor, Server, SpriteBuilder } from 'bun-bundler/modules';

const bundler = new Bundler();
const server = new Server();
const spriteBuilder = new SpriteBuilder(); // optional
const imgProcessor = new ImageProcessor(); // optional

bundler.watch({
    dist: './dist',
    // sass/css bundling
    sass: './src/css/app.css',
    cssDist: './dist/css/',
    // js bundling
    js: './src/js/app.js',
    jsDist: './dist/js/',
    // html/pug bundling
    html: './src/html/',
    htmlDist: './dist',
    staticFolders: [
        // static assets bundling
        './src/images/',
        './src/fonts/',
        './src/static/',
    ],
    assembleStyles: './dist/css/app.css', // imported styles form JS goes here
    production: false,
    debug: false,
    onStart: () => {
        server.startServer({
            root: './dist',
            open: true,
            debug: false,
            port: 8080,
            overrides: {},
        });
    },
    onUpdate: ({ changes }) => {
        if (changes.staticFolders) {
            imgProcessor.start({
                debug: false,
                entry: './dist/images',
            });

            spriteBuilder.start({
                debug: false,
                dist: './dist/images/sprite/sprite.svg',
                entry: './dist/', // detect SVG in html files here
                spriteIconSelector: 'svg[data-sprite-icon]',
                additionalIcons: './src/images/facebook.svg', // inline icons, you want to add
            });
        }
    },
    onError: () => server.stopServer(),
});

Run it npm run dev.js or bun dev.js

Production bundling example (Minification & Optimizations)

Same config, but with production setup

File build.js

import Bundler from 'bun-bundler';
import { ImageProcessor, SpriteBuilder } from 'bun-bundler/modules';

const bundler = new Bundler();
const spriteBuilder = new SpriteBuilder(); // optional
const imgProcessor = new ImageProcessor(); // optional

bundler.build({
    dist: './build',
    // sass/css bundling
    sass: './src/css/app.css',
    cssDist: './build/css/',
    // js bundling
    js: './src/js/app.js',
    jsDist: './build/js/',
    // html/pug bundling
    html: './src/html/',
    htmlDist: './build',
    staticFolders: [
        // static assets bundling
        './src/images/',
        './src/fonts/',
        './src/static/',
    ],
    assembleStyles: './build/css/app.css', // imported styles form JS goes here
    production: true,
    debug: false,
    onStart: () => {},
    onBuildComplete: () => {
        imgProcessor.start({
            debug: false,
            entry: './build/images',
        });
        spriteBuilder.start({
            debug: false,
            dist: './build/images/sprite/sprite.svg',
            entry: './build/', // detect SVG in html files here
            spriteIconSelector: 'svg[data-sprite-icon]',
            additionalIcons: './src/images/facebook.svg', // inline icons, you want to add
        });
    },
    onError: () => {},
});

We're ready to takeoff, run npm run build.js or bun build.js

Examples and Boilerplate

Check the ./examples directory in the repository to see Bun-Bundler in action.
For a production-ready boilerplate, visit Glivera Bun Template.

Contributing

We welcome contributions! Feel free to open issues or submit pull requests to help improve Bun-Bundler.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ by the Bun-Bundler team. Happy bundling!

Détail du package

bun-bundler

readme