2016-05-31 16 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

でエクスプレスサーバを使用したいと思っています。次に、あなたのエクスプレスサーバをプロキシするために 'browser-sync start -P'を使うことができます。 https://www.browsersync.io/docs/command-line/ –

答えて

7

は確かに、助けを求めて@ LIM-hにありがとうパラメータ--proxy(-P)をbrowser-sync startに追加することができます。browsersync.io/docs/command-line

ここでデモをダウンロードできます

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; 

:app.js対応

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

browser-sync start


--proxyオプションを追加し、明示的サーバを起動した後https://github.com/damienromito/express-sync

このサンプルプロジェクトでブラウザ同期をテストするには、/publicフォルダのstyle.cssファイルを更新します。

関連する問題