BrowserSyncで接続ミドルウェアを使用する

Question

browserSyncでgulp-connectミドルウェアを使用しようとしていますが、これまでのところ運がありません。

これは私が一口タスク（ヨーマンWebアプリケーション）

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

にそれを追加しようとしているhow it should be used

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

あるサーバーは、最大発射したがエラーなしでは何も提供されていません。私は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からのものと同じようなものですか？私の設定からbrowserSyncとWebPACKのミドルウェアの設定の下

Answer 1

：

/** 
* 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);