Dead-simple live injection of Brunch-built CSS/JS files in the browser
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.jscsrc
.jshintrc
.travis.yml
CONTRIBUTING.md Initial README Mar 7, 2015
LICENSE Initial commit Mar 7, 2015
README.md
index.js
mocha.opts
package.json 1.7.22 Mar 9, 2015

README.md

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

Build Status Dependency status Dev Dependency status Code Climate Test Coverage

NPM

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.