Verwenden Sie eine Verbindung Middleware mit BrowserSync

Question

Ich versuche, eine Schluck-Verbindung Middleware mit BrowserSync verwenden, aber ich habe bisher kein Glück.

dies how it should be used

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

Ich versuche, es in einen großen Schluck Aufgabe hinzuzufügen (Yeoman 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' 
    } 
} 
}); 

Die Server-Feuer, aber ohne Fehler, aber nichts serviert wird. Ich versuche, mit dem browserSync official doc herauszufinden, aber selbst das einfachste Beispiel hängt den Server.

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

Was ist der richtige Weg, um eine Middleware mit browserSync zu verwenden? Was vermisse ich ? Sind browserSync-Middlewares 'normale' wie die von Express oder Gulp-connect?

Answer 1

Unten browserSync und Webpack Middleware Config aus meiner Konfiguration:

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