fb-flo-brunch

Dead-simple live injection of Brunch-built CSS/JS files in the browser

Brunch? fb-flo? What?

• Brunch is a kickass front-end app assets builder; basically it's what most people trod through the swamps of Grunt, Gulp or what-have-you for, only much, much better and far, far, simpler to use.
• fb-flo is a great little system by Facebook to let you live update CSS or JS files inside an open browser page (instead of just reloading the whole thing). As it depends on JS runtime's hotswap capabilities, it's not available everywhere yet; but for Chrome, it kinda rules.

The only thing is, you need to write your own fb-flo server, which is a tiny Node.js program; most of the time, that just means copy-pasting the (small) example code from their homepage, and then running it. But for Brunch users, the ideal way would be through a plugin that auto-starts and auto-stops the server, and figures out automatically what to watch (the final results of the build pipeline).

So we made fb-flo-brunch: your lovely Brunch plugin to have automatic fb-flo capability over your watched build!

Installing

Get in your Brunch-using project's root directory, and just install the plugin:

$ npm install --save-dev fb-flo-brunch

Configuring

As most Brunch plugins do, this one Just Works™ out of the box. But we're just as nerdy as the next developer when it comes to customization… and fb-flo itself offers quite a few options. So you can tweak the plugin's behavior to your heart's content inside Brunch's config.plugins.fbFlo main key.

In the table below, the “fb-flo?” column states whether this is just an fb-flo option, directly forward to the server or resolver. For full details on their default values and behavior, check out the fb-flo doc.

Option	fb-flo?	Description	Default
enabled		Whether the plugin is enabled or not	true
host	server	What network interface to listen to	see fb-flo
message		The message to log on the client-side (browser) when a resource just got updated live. The %s code will be replaced by the resource's name. The presence of this automatically defines fb-flo’s update resolver option.	“%s has just been updated with new content”
messageColor		A CSS color name for displaying the message	black
messageLevel		What console level to display message on	log
messageResourceColor		A CSS color name for the resource name in message
pollingInterval	server	see fb-flo	see fb-flo
port	server	What port to listen to	8888
resolverMatch	resolver (match)	see fb-flo	see fb-flo
resolverReload	resolver (reload)	Extends fb-flo's boolean-only values with anymatch sets, allowing for tremendous flexibility	false
useFilePolling	server	see fb-flo	see fb-flo
useWatchman	server	see fb-flo	see fb-flo
verbose	server	Whether to output everything on the wire…	false
watchDotFiles	server	see fb-flo	see fb-flo

Contributing

We welcome all contributions, most importantly bug fixes, augmented test coverage and extended docs.

See CONTRIBUTING.md for details and guidelines on how to help.

License

This work is MIT-licensed and © 2015 Christophe Porteneuve.

Check LICENSE for full details.