Использование промежуточного программного обеспечения для соединения с BrowserSync

Question

Я пытаюсь использовать промежуточное программное обеспечение gulp-connect с browserSync, но мне пока не повезло.

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

Сервер срабатывает вверх, но без каких-либо ошибок, но ничего не подается. Я пытаюсь выяснить с помощью браузераSync official doc, но даже самый простой пример зависает на сервере.

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

Каков правильный способ использования промежуточного программного обеспечения с браузеромSync? Что мне не хватает? Являются ли регулярные «средние» браузеров BrowsSync такими, как Express или Gulp-connect?

Answer 1

Ниже browserSync и Webpack Middleware конфигурации из моей конфигурации:

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