1. 홈
  2. 질의 응답
  3. 꿀꺽 마른 Express와 BrowserSync?

꿀꺽 마른 Express와 BrowserSync?

2016-05-31 9 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", 
    },

출처

2016-05-31 Damien Romito

+0

browserSync 내장 서버 대신 명시 적 백엔드를 사용 하시겠습니까? –

+0

예, browserSync가있는 익스프레스 서버 –

+1

을 사용하고 싶다면 익스프레스 서버를 프록시하기 위해'browser-sync start -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

는, 예

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

에게 browser-sync start

에 해당하는 app.js를 --proxy 옵션을 추가 :

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 파일을 업데이트하십시오.

출처

2016-06-01 13:46:34

 관련 문제

  • 관련 문제 없음^_^