When you make a change to one source file, you shouldn't have to switch back to command line to run a command 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...
Start a local webserver to automatically run your bundl pipeline as files change.
const Bundl = require('bundl');
const pack = require('bundl-pack');
const write = require('bundl-write');
const b = new Bundl('./src', { outputDir: './dist' })
.then(pack())
.then(write());
b.webserver({
// see options below
});
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.
NOTE: this is intended for rapid development, not as a production-ready webserver
Controls how messages are logged into the console as urls are requested. See morgan for more details.
{
log: false // disables logging
}
The default logging format is:
{
log: {
format: ':method :url :status :response-time ms - :res[content-length]',
options: {}
}
}
Specify the port where the server should listen. Default is 5555
.
{
port: 5678
}
Should bundled resources be rebuilt when requested? Default behavior is to rebuild only when dependencies have changed since the last build. Other options are always
and never
.
{
rebuild: 'never'
}
Specify the root directory to serve files from. Default is process.cwd()
.
{
root: '../dist'
}
Specify the Bundl build chain(s) to run when files have changed. When a devserver is started from a Bundl instance, the instance itself will be included as a route by default.
Bundl.webserver({
routes: [bundl1, bundl2],
});
const b = new Bundl(targets);
b.webserver({
// routes: [b], <-- implied by default
});
Should the server show a list of directory contents when browsing urls? Default is true
.
{
serveIndex: false
}
Specify the path to watch for changes to dependencies. Default is root.
{
watch: './src/javascripts'
}
const b = new Bundl(targets);
const app = express();
app.use(b.middleware());