Fast Automatic Browserify Bundling with Beefy

If you’re a browserify user, then beefy might help you bundle your JavaScript file automatically. It is a command line tool that runs a local node server which accepts a path to the JS file (with all your require() calls) and serves the bundled asset via browserify.

Install

Install the module globally –

[bash]
$ npm install -g beefy
[/bash]

Ofcourse you’ll also need browserify installed.

Usage

Using it is as simple as this –

[bash]
$ beefy path/to/main.js PORT — [browserify args] # syntax
$ beefy public/js/main.js 8080 — -d # actual usage
[/bash]

So we shoot the server on port 8080, visiting http://localhost:8080/public/js/main.js will give us the bundled JS file (with sourcemap as we passed -d option for browserify). When the server starts it auto-generates an index.html (if it doesn’t exists in current working directory) that automatically includes the script tag with src to the path you want browserified which in this case is public/js/main.js as well as live reload script (if its enabled) that we’ll cover in a bit. Precisely, what I mean is this –

[html]
<script src="/-/live-reload.js"></script>
<script src="/public/js/main.js" type="text/javascript"></script>
[/html]

We can also specify a completely different route to alias the asset like this –

[bash]
$ beefy public/js/main.js:bundle.js 8080 — -d
[/bash]

The : syntax means when a browser requests bundle.js, beefy will respond with the browserified public/js/main.js.

That covered, the most basic usage is like this –

[bash]
$ beefy public/js/main.js –open
[/bash]

It’ll automatically choose a port (usually 9966) and open it in your default browser.

Using the --live option you can enable live reloading, i.e., whenever a file is changed/saved in the current working directory the browser will refresh. This is achieved via Server-sent Events (with a fallback to good old XHR). If you’re not using the generated index file then you’ll have to put the following script tag to enable live reloading –

[html]
<script src="/-/live-reload.js"></script>
[/html]

By default beefy inserts -d into the browserify args to enable source maps. You can disable this by passing in --debug=false.

Overall, this tool is quite handy if you want to create bundles on demand that gets served from a standalone development server.

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.