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 
     })]; 
    } 
    ... 

은 (보좌관 웹 애플리케이션)

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와 같은 '일반'미들웨어입니까? 내 구성에서 browserSync 및 웹팩 미들웨어 설정 아래

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