[SOLVED] add livereload to broccoli

add livereload to broccoli

I'm trying to add livereload to broccoli

Unfortunately the live-reload plugin documentation is a bit short and I cannot get it to work. In the docs it is stated to do the following:

var injectLivereload = require('broccoli-inject-livereload');

var public = injectLivereload('public');

I figured that this should be placed inside the Brocfile.js (right?). But whatever I do nothing gets reloaded (I have to hit reload to refresh) I've also changed the 'public' part, which I think is representing a directory. Any help would be appreciated.

Solution

I'm using BrowserSync instead of "only" LiveReload. It also supports LiveReload (and LiveInject for CSS), but it has tons of other features as well (like ghosting).

Let's create a file called server.js and a folder called app next to it, where you put our index.html, .css and .js. This server.js contains:

var broccoli = require("broccoli");
var brocware = require("broccoli/lib/middleware");
var mergeTrees = require("broccoli-merge-trees");
var Watcher = require("broccoli-sane-watcher");
var browserSync = require("browser-sync");

var tree = mergeTrees(["app"]); // your public directory
var builder = new broccoli.Builder(tree);
var watcher = new Watcher(builder);

watcher.on("change", function(results) {
    if (!results.filePath) return;

    // Enable CSS live inject
    if (results.filePath.indexOf("css") > -1) {
        return browserSync.reload("*.css");
    }

    browserSync.reload();
});

browserSync({
    server: {
        baseDir: "./",
        middleware: brocware(watcher)
    }
});

Now fire the server (which will open the browser automatically):

node server.js

I know this isn't as straightforward as Gulp or Grunt at first sight, but it offers fine grained control over everything and it's really blazing fast, even if your app grows and grows.