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 –
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
$ npm install -g beefy
Ofcourse you’ll also need browserify installed.
Usage
Using it is as simple as this –
$ beefy path/to/main.js PORT -- [browserify args] # syntax $ beefy public/js/main.js 8080 -- -d # actual usage
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 –
<script src="/-/live-reload.js"></script> <script src="/public/js/main.js" type="text/javascript"></script>
We can also specify a completely different route to alias the asset like this –
$ beefy public/js/main.js:bundle.js 8080 -- -d
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 –
$ beefy public/js/main.js --open
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 –
<script src="/-/live-reload.js"></script>
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.
Hi,
Thanks for the article, I’m trying to use this module with coffeescript files, how could I achieve that? I tried to use coffeeify as transform command but it does not seem to work:
beefy static/js/apps/app.coffee --transform coffeeify --debugHi Maxime,
Try this
$ beefy static/js/apps/app.coffee --open -- -t coffeeify. If you check the syntax, browserify arguments go after the--. Hope that helps.Good Luck!