将 livereload 添加到西兰花答案

【问题标题】：add livereload to broccoli将 livereload 添加到西兰花
【发布时间】：2015-08-24 19:35:43
【问题描述】：

我正在尝试将livereload 添加到broccoli

不幸的是，live-reload 插件文档有点短，我无法让它工作。在文档中声明要执行以下操作：

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

var public = injectLivereload('public');

我认为这应该放在Brocfile.js 中（对吗？）。但是无论我什么都不做都会重新加载（我必须点击重新加载才能刷新）我还更改了'public' 部分，我认为它代表一个目录。任何帮助将不胜感激。

【问题讨论】：

标签： javascript livereload broccolijs

【解决方案1】：

我正在使用 BrowserSync 而不是“仅”LiveReload。它还支持 LiveReload（以及用于 CSS 的 LiveInject），但它还具有大量其他功能（例如重影）。

让我们创建一个名为server.js 的文件和一个名为app 的文件夹，在其中放置我们的index.html、.css 和.js。这个server.js 包含：

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)
    }
});

现在启动服务器（它将自动打开浏览器）：

node server.js

我知道这并不像 Gulp 或 Grunt 乍一看那么简单，但它提供了对所有内容的精细控制，而且速度非常快，即使您的应用程序不断增长。

【讨论】：

【解决方案2】：

我选择通过 Broccoli Browser Sync plugin 使用 Browsersync，而不是 Livereload

我最终的 Brocfile.js 非常类似于（从插件 npm 页面中提取）：

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]);

有了这个解决方案，我可以继续使用 broccoli 通过broccoli serve 为我的资产提供服务，我的所有资产都将被重建，然后在浏览器中重新加载，包括我的 CSS。

【讨论】：