添加livereload西蘭花

不幸的是，livereload插件文檔是有點短，我無法得到它的工作。在文檔中指出要做到以下幾點：

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

var public = injectLivereload('public');

我想，這應該被置於其內Brocfile.js（右？）。但是無論我做什麼都不會重新加載（我必須重新加載才能刷新）我還更改了'public'部分，我認爲這部分代表了目錄。任何幫助，將不勝感激。

來源

2015-08-24 Jeanluca Scaljeri

我使用的，而不是「唯一」 LiveReload BrowserSync。它還支持LiveReload（和LiveInject for CSS），但它也具有許多其他功能（如重影）。

讓我們創建一個名爲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

我知道這是不是因爲咕嘟咕嘟或一見鍾情咕嚕一樣簡單，但它提供對所有內容都進行細粒度控制，即使您的應用程序增長並增長，它也非常快速。

來源

2015-09-11 10:41:08 kraftwer1

相反Livereload的我選擇通過使用Browsersync的Broccoli Browser Sync plugin

我最後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。

來源

2016-07-22 18:40:33 Zerodestiny

添加livereload西蘭花

回答

相關問題