Bundl
Become a master of bundles
What Is Bundl?
Bundl builds and packages files for your frontend codebase. It switches the paradigm of when resources are built vs when they are needed (Bundl On-Demand). Use it as a task manager or use it to package your source code with additional resources (like styles and images) into a JavaScript bundle that can be served to your web browser.
Why Use Bundl?
- Build resoucres only when requested by your browser (and only if they've changed) (Example)
- Easily concat, require, and wrap all of your various resources to generate the bundle you really need (Example)
- Run other tasks like linting, file system operations, etc. (Example)
- Write next generation ES6 JavaScript today with a transpiler plugin (Example)
Get Started
Install
$ cd ~/myProject
$ npm install bundl --save-dev
Create Your Build Script
Make a new file at ~/myProject/bundl.js
var Bundl = ; // Pluginsvar pack = ;var minify = ;var write = ; // Configurevar bundlOptions = outputDir: 'dist/javascripts' clean: true;var targets = 'my_project_bundle.js': 'src/entry.js'; // Setup a build pipelinevar myProjectBundl = targets bundlOptions ; // Start the buildmyProjectBundl;
Run Your Script
$ cd ~/myProject
$ node bundl --min
Run via NPM (optional)
Add scripts to your package.json
$ npm run build
How to Use
Build Resources Live On-Demand!
When you make a change to one source file, you shouldn't have to switch back to command line to run a task before you can see your changes live in a browser. You also shouldn't need to wait for every bundle to rebuild if you only want to see one or two of them. Use Bundl's dev server instead...
// Setup a build pipelinevar myProjectBundl = targets bundlOptions ; // Start live dev modemyProjectBundl;
Now, open a browser to http://localhost:5555
HTTP Requests for a bundled resource will check to see if any of the source files within this bundle have changed since last request. If so, the webserver will rebuild the requested bundle before sending it back to the browser.
Learn how to configure a devserver for your project
Debugging
Add --verbose
as a command line option to print more info about what's happening
$ node bundl --verbose
Add .debug()
to your build chain to print which src files will be bundled into which dest files
new Bundl(targets, bundlOptions).debug();