javascript - 将 livereload 添加到西兰花

Question

我正在尝试添加 livereload至 broccoli

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

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

var public = injectLivereload('public');

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

Answer 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 那样简单，但它提供了对所有内容的细粒度控制，而且速度非常快，即使您的应用程序不断增长也是如此。