使用BrowserSync連接中間件

Question

我正在嘗試使用browserSync的gulp-connect中間件，但到目前爲止我還沒有運氣。

這是how it should be used

... 
    middleware: function(){ 
     return [gulpConnectSsi({ 
      baseDir: __dirname + '/app', 
      ext: '.html', 
      domain: 'http://example.com/', 
      method: 'readOnLineIfNotExist' // readOnLine|readLocal|readOnLineIfNotExist|downloadIfNotExist 
     })]; 
    } 
    ... 

我試圖將其添加到一飲而盡任務（自耕農的webapp）

browserSync({ 
notify: false, 
port: 9000, 
logLevel: "debug", 
server: { 
    baseDir: ['.tmp', 'app'], 
    middleware: function(){ 
     return [gulpConnectSsi({ 
      baseDir: __dirname + '/app', 
      ext: '.html', 
      domain: 'http://localhost:9000/', 
      method: 'readOnLineIfNotExist' 
     })]; 

    }, 
    routes: { 
    '/bower_components': 'bower_components' 
    } 
} 
}); 

服務器火起來，但沒有任何錯誤，但沒有供應。我試圖找出browserSync official doc，但即使是最簡單的例子掛起服務器。

// Multiple Global Middlewares 
middleware: [ 
    function (req, res, next) { 
     /** First middleware handler **/ 
    }, 
    function (req, res, next) { 
     /** Second middleware handler **/ 
    } 
] 

在browserSync中使用中間件的正確方法是什麼？我錯過了什麼？ browserSync中間件是否像'Express'或'Gulp-connect'那樣是'常規'中間件？

Answer 1

下面browserSync和中間件的WebPack配置從我的配置：

/** 
* Browser Sync & webpack middleware 
*/ 

var gulp     = require ('gulp'); 
var browserSync   = require('browser-sync'); 
var webpackConfig  = require('./helpers/webpackConfig')(); 
var webpack    = require('webpack'); 
var compiler    = webpack(webpackConfig); 
var webpackDevMiddleware = require('webpack-dev-middleware'); 
var webpackHotMiddleware = require('webpack-hot-middleware'); 
var path     = require('path'); 

var mode     = require('./helpers/mode'); 
var config    = require("../config"); 

var serverConfig = { 
    logPrefix: "webman.pro", 
    port: 3000, 
    ui: { 
     port: 3001 
    } 
}; 


// Run middleware only on development mode 
if(!mode.production) 
serverConfig.middleware = [ 
    webpackDevMiddleware(compiler, { 
     noInfo: true, 
     publicPath: path.join('/', webpackConfig.output.publicPath), 
     stats: 'errors-only' 
    }), 
    webpackHotMiddleware(compiler) 
] 

// Change config when we have Server 
config.proxy 
? serverConfig.proxy = config.proxy 
: Object.assign(serverConfig, { 
    server: { 
     baseDir: config.root.dist, 
    }, 
    tunnel: false, 
}) 

var live = function(){ 
    browserSync.init(serverConfig); 
}; 

gulp.task('live', live);