Express und BrowserSync ohne Schluck?

Ich arbeite an einer Express-App. Ich habe browserSync nur verwendet, um statische Dateien zu sehen, aber jetzt möchte ich dasselbe mit einer Express-App machen.Express und BrowserSync ohne Schluck?

Ich sah viele Beispiele mit Gulp. Aber ich frage mich, ob es eine Lösung gibt, nur mit Npm-Skripten zu verwalten? (Und nodemon?)

Meine aktuelle Skripte:

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

Quelle

2016-05-31 Damien Romito

Haben Sie einen Express-Backend anstelle des browserSync in Server gebaut verwenden? –

Ja, ich möchte einen Express-Server mit browserSync –

verwenden, dann können Sie 'browser-sync start -P 'verwenden, um Ihren Express-Server zu verwenden. https://www.browsersync.io/docs/command-line/ –

Danke an @ lim-h für Hilfe in der Tat Es ist möglich, den Parameter --proxy (-P) zu browser-sync startbrowsersync.io/docs/command-line

hinzuzufügen Sie können die Demo hier herunterladen https://github.com/damienromito/express-sync

Nach dem Express-Server starten, fügen Sie die --proxy Option browser-sync start

Beispiel

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

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

HINWEIS: Browser-Sync mit diesem Beispielprojekt zu testen, habe ich eine style.css-Datei in dem Ordner /public aktualisiere

Quelle

2016-06-01 13:46:34

@Damien Romito

Sie dieses Plugin verwenden: - https://www.npmjs.com/package/connect-browser-sync

Quelle

2016-05-31 15:26:28

Antwort

Verwandte Themen