Express和BrowserSync没有吞咽? [英] Express and BrowserSync without gulp?

查看:263
本文介绍了Express和BrowserSync没有吞咽?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在制作一个快速应用程序。我只用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,
},


解决方案

感谢@ lim-h的帮助,确实可以添加param - proxy (-P)至浏览器同步开始 browsersync.io/docs/command-line



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



在启动快速服务器,将 - 代理选项添加到 browser-sync start





示例

 节点应用程序& browser-sync start --proxy'localhost:9000'--files'public'

对应应用.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 =stylesheettype =text / css href =public / style.css>'+
'< / head>'+
'< body>'+
'< p> Hello World< / p> ;'+
'< / body>'+
'< / html>')
});

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

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

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

解决方案

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

这篇关于Express和BrowserSync没有吞咽?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆