2016-05-31 78 views
4

我正在开发一个快速应用程序。我只使用browserSync来观看静态文件,但现在,我想对快速应用程序做同样的事情。Express和BrowserSync没有吞咽?

我看到很多使用Gulp的例子。但我想知道是否有任何解决方案只能使用npm脚本进行管理? (和nodemon?)

我现在的脚本:

"scripts": { 
    "start": "npm run start-server & npm run watch-js", 
    "build-js": "browserify -t babelify -t aliasify -t partialify src/ | uglifyjs > public/app.js", 
    "start-server": "browser-sync start --server 'public/' --files 'public/' --port 9000 --no-ui", 
    "watch-js": "watchify -vd -t babelify -t aliasify -t partialify src/ -o public/app.js", 
    }, 
+0

是否要使用快速后端代替内置的服务器browserSync? –

+0

是的,我想用browserSync –

+1

用户快速服务器,那么你可以使用'浏览器同步启动-P'来代理你的快递服务器。 https://www.browsersync.io/docs/command-line/ –

回答

7

谢谢帮忙@ LIM-H,确实可以将参数--proxy(-P)添加到browser-sync startbrowsersync.io/docs/command-line

您可以在这里下载演示https://github.com/damienromito/express-sync

启动Express服务器后,--proxy选项添加到browser-sync start


node app & browser-sync start --proxy 'localhost:9000' --files 'public'" 

对应app.js:

var express = require('express'), 
    app = express(), 
    router = express.Router() 

app.use(router) 
app.use('/public', express.static('public')); 

router.all('/', function (req, res, next) { 

    res.send('<!DOCTYPE html>' + 
      '<html>' + 
      '<head>' + 
       '<title>Whyd Store</title>' + 
       '<link rel="stylesheet" type="text/css" href="public/style.css">' + 
      '</head>' + 
      '<body>' + 
      '<p>Hello World</p>' + 
      '</body>' + 
      '</html>') 
}); 

app.listen(9000); 
module.exports = app; 

注意:要测试浏览器同步与此示例项目,我更新/public文件夹中的style.css文件