将livereload添加到西兰花 [英] add livereload to broccoli

问题描述

我正在尝试将 liverload 添加到西兰花

不幸的是，实时重新加载插件文档有点短，我无法使其正常工作。在文档中规定要执行以下操作：

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

我认为应该将其放置在 Brocfile.js （对吗？）。但是，无论我什么都不做，都会重新加载（必须重新加载才能刷新），我还更改了‘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.

推荐答案

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

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).

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

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知道这乍一看并不像Gulp或Grunt那样简单，但是它提供了对所有内容的细粒度控制，而且即使您的应用程序不断增长，它的速度也非常快。

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.

这篇关于将livereload添加到西兰花的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！