handlebars node.js express gulp browser-sync nodemon

node.js - handlebars - Express y BrowserSync sin trago?



express-handlebars npm (2)

@Damien Romito

Puede usar este complemento: - https://www.npmjs.com/package/connect-browser-sync

Estoy trabajando en una aplicación express. Utilicé browserSync solo para ver archivos estáticos pero ahora, quiero hacer lo mismo con una aplicación express.

Vi muchos ejemplos usando Gulp. Pero me pregunto si hay alguna solución para administrar solo con scripts npm. (y nodemon?)

Mis guiones actuales:

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


Gracias a @ lim-h por la ayuda; de hecho, es posible agregar el param --proxy (-P) al browser-sync start browsersync.io/docs/command-line

Puede descargar la demostración aquí https://github.com/damienromito/express-sync

Después de iniciar el servidor express, agregue la opción --proxy al browser-sync start

Ejemplo

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

app.js correspondiente:

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;

NOTA : Para probar la sincronización del navegador con este proyecto de muestra, actualizo un archivo style.css en la carpeta /public