add livereload to broccoli

Question

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.

Answer 1

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.

Answer 2

Instead of Livereload I opted to use Browsersync via the Broccoli Browser Sync plugin

My final Brocfile.js was very similar to (pulled from plugins npm page):

var fastBrowserify = require('broccoli-fast-browserify');
var babelify = require('babelify');
var mergeTrees = require('broccoli-merge-trees');
var compileSass = require('broccoli-sass-source-maps');
var funnel = require('broccoli-funnel');
var BrowserSync = require('broccoli-browser-sync');

var optionalTransforms = [
  'regenerator'
  // 'minification.deadCodeElimination', 
  // 'minification.inlineExpressions' 
];

var babelOptions = {stage: 0, optional: optionalTransforms, compact: true};

// var browserifyOpts = {deps: true, entries: files, noParse: noParse, ignoreMissing: true}; 
var transformedBabelify = fastBrowserify('app', {
  browserify: {
    extensions: [".js"]
  },
  bundles: {
    'js/app.js': {
      entryPoints: ['app.js'],
      transform: {
        tr: babelify,
        options: {
          stage: 0
        }
      }
    }
  }
});

var appCss = compileSass(['piggy/frontend/app'], 'main.scss', 'css/app.css');

var staticFiles = funnel('frontend', {
  srcDir: 'static'
});

var browserSync = new BrowserSync([staticFiles, transformedBabelify, appCss]);

module.exports = mergeTrees([staticFiles, transformedBabelify, appCss, browserSync]);

With this solution I was able to continue using broccoli to serve my assets via broccoli serve and all my assets would be rebuilt then reloaded in the browser including my css.