在西兰花中加入肝脏

Question

我想给西兰花添加肝脏负荷

不幸的是，实时加载插件文档有点短，我无法让它工作。在文档中，它被声明做以下事情:

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

我认为这应该放在Brocfile.js(对吗?)。但是无论我做什么都不会重新加载(我必须点击重新加载以刷新)，我也改变了'public'部分，我认为它代表了一个目录。

Answer 1

我使用BrowserSync而不是"only" liverload。它还支持liveload(和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那样简单，但它提供了对所有内容的细粒度控制，并且速度非常快，即使你的应用程序不断增长。

Answer 2

我选择通过西兰花浏览器同步插件使用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 serve服务我的资产，我所有的资产将被重建，然后在浏览器中重新加载，包括我的css。