Express and BrowserSync without gulp?

て烟熏妆下的殇ゞ 提交于 2019-12-04 23:53:11

问题


I'm working on an express app. I used browserSync only to watch static files but now, I want to do the same with an express app.

I saw a lot of examples using Gulp. But i wonder if there is any solution to manage only with npm scripts? (and nodemon?)

My current scripts:

"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",
  },

回答1:


Thank you to @lim-h for help, indeed it's possible to add the param --proxy (-P) to browser-sync start browsersync.io/docs/command-line

You can download the demo here https://github.com/damienromito/express-sync

After start the express server, add the --proxy option to browser-sync start


Example

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

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

NOTE: To test browser-sync with this sample project, I update a style.css file in the /public folder




回答2:


@Damien Romito

You can use this plugin:- https://www.npmjs.com/package/connect-browser-sync



来源:https://stackoverflow.com/questions/37548537/express-and-browsersync-without-gulp

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!