Structure your project as you like, any language any file type!

Files

src

lib.js

app.js

css

style.css

fonts.css

copy

logo.png

background.png

index.html

Tell your config how to process, join or copy all your files

bundl.config.js

module.exports = {
  output: {
    // Join .js files
    "build/bundle.js": "src/js/**.js",
    // Join .css files
    "build/bundle.css": "src/css/**.css",
    // Copy files
    "build/**": "src/copy/**"
  }
};

Bundl it!

Install

  npm install @vimlet/bundl

Run

  npx @vimlet/bundl

Result

build

bundle.js

bundle.css

logo.png

background.png

index.html

Cool isn't it!

You can even use any npm package or external tool as part of the bundel process

module.exports = {
  output: {
    // Join .js files and minify
    "build/bundle.js": {
      use: async function (entry) {
        entry.content = (await require("uglify-js").minify(entry.content.toString("utf8")));
        return entry;
      },
      input: "src/js/**.js"
    },
    // ...
  }
};

Discover more awesome stuff Bundl can do for you...

watch, hashing, templating, sequencing...

module.exports = {
  output: {
    // Build on file change
    watch: "src",
    // Name with hash to avoid cache issues
    "build/bundle.{{hash}}.js": {
      order: 1,
      input: "src/js/**.js"
    },
    // Templating parsing support
    "build/**": {
      order: 1,
      parse: true
      input: "src/copy/**"
    }
  }
};

index.html template & result

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <!-- Parse will inject bundle.hash.js here -->
  <script src="/<% hash('bundle.js') %>"></script>
</head>

<body>
  <!-- Templating can be used for any purpose -->
  The answer to everything is <%= Math.sqrt(1764) %>!
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <!-- Parse will inject bundle.hash.js here -->
  <script src="/bundle.A2DF32.js"></script>
</head>

<body>
  <!-- Templating can be used for any purpose -->
  The answer to everything is 42!;
</body>

</html>