Node.js - Automatische Aktualisierung in Dev

Question

Ich versuche, die DEV Erfahrung in meinem Knoten zu verbessern. Um das zu tun, möchte ich:

a) meinen Server neu starten, wenn der serverseitige Code geändert wird
b) Aktualisieren Sie den Browser, wenn der clientseitige Code geändert wird.

In dem Bemühen, dies zu erreichen, begann ich nodemon und browserSync in mein Schluck-Skript zu integrieren.

In meinem schluck Skript, ich habe die folgende Aufgabe:

gulp.task('startDevEnv', function(done) { 
    // Begin watching for server-side file changes 
    nodemon(
     { script: input.server, ignore:[input.views] }) 
     .on('start', function() { 
      browserSync.init({ 
       proxy: "http://localhost:3002" 
      }); 
     }) 
    ;  

    // Begin watching client-side file changes 
    gulp.watch([ input.css, input.js, input.html ], function() { browserSync.reload(); }); 
    done(); 
}); 

Wenn die obige Aufgabe ausgeführt wird, mein Browser http://localhost:3000/ öffnet. Meine App ist wie erwartet sichtbar. Im Konsolenfenster merke ich jedoch:

Error: listen EADDRINUSE :::3002 

Ich verstehe bis zu einem gewissen Grad. Ich habe app.set('port', process.env.PORT || 3002); in meiner server.js Datei. Aber ich dachte, das wäre der Zweck, den Proxy-Wert zu setzen. Dennoch, wenn ich eine Codeänderung machen, sehe ich die folgenden verwandten Fehler in meinem Konsolenfenster:

[07:08:19] [nodemon] restarting due to changes... 
[07:08:19] [nodemon] starting `node ./dist/server.js` 
events.js:142 
     throw er; // Unhandled 'error' event 
    ^

TypeError: args.cb is not a function 
    at Object.init (/Users/me/Website/Develop/node_modules/browser-sync/lib/public/init.js:25:25) 
    at null.<anonymous> (/Users/me/Website/Develop/gulpfile.js:142:25) 
    at emitNone (events.js:73:20) 
    at emit (events.js:167:7) 
    at Object.run (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:97:7) 
    at Function.run.kill (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:221:7) 
    at null.<anonymous> (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:333:7) 
    at emitOne (events.js:83:20) 
    at emit (events.js:170:7) 
    at restartBus (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/watch.js:162:7) 
Me-MBP:Develop me$ events.js:142 
     throw er; // Unhandled 'error' event 
    ^

Error: listen EADDRINUSE :::3002 
    at Object.exports._errnoException (util.js:856:11) 
    at exports._exceptionWithHostPort (util.js:879:20) 
    at Server._listen2 (net.js:1238:14) 
    at listen (net.js:1274:10) 
    at Server.listen (net.js:1370:5) 
    at Object.<anonymous> (/Users/me/Website/Develop/dist/server.js:70:8) 
    at Module._compile (module.js:399:26) 
    at Object.Module._extensions..js (module.js:406:10) 
    at Module.load (module.js:345:32) 
    at Function.Module._load (module.js:302:12) 

An dieser Stelle meiner Code-Änderungen werden nicht in meinem Browser. Ich verstehe nicht, was ich falsch mache. Ich vermute, dass ich meine Ports falsch konfiguriert habe. Aber ich bin mir nicht sicher, wie sie eingerichtet werden sollten.

Standardmäßig verwendet BrowserSync den Port 3000. BrowserSync verwendet auch den Port 3001 für die BrowserSync-Benutzeroberfläche. Aus diesen zwei Gründen dachte ich, dass ich den Port in meiner server.js-Datei auf 3002 setzen und den oben gezeigten Proxy erstellen würde. Was mache ich falsch?

Answer 1

Sie müssen eigentlich keinen Schluck verwenden, damit dies funktioniert.

a) neu starten meinem Server beim serverseitigen Code global geändert wird

installieren nodemon mit npm i -g nodemon dann auf Ihre App-Ordner tun nodemon oder nodemon ${index-file-of-your-app}.

b) Aktualisieren Sie den Browser, wenn der clientseitige Code geändert wird.

Verwenden Sie browserify oder webpack. Ich bevorzuge Webpack; Möglicherweise müssen Sie etwas über die Konfiguration lernen, aber die gute Sache mit Webpack ist, dass Sie es nicht aktualisieren müssen. Sobald Änderungen gefunden werden, werden die Änderungen automatisch im Browser angezeigt. https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

Answer 2

Ich vermisse einige Kontext (z. B. bin ich nicht sicher, was input darstellt), aber ich denke, this npm Modul könnte Ihr Problem lösen. Hier ist ein Beispiel aus der npm Paket Seite:

var express = require('express') 
    , http = require('http') 
    , path = require('path') 
    , reload = require('reload') 
    , bodyParser = require('body-parser') 
    , logger = require('morgan') 

var app = express() 

var publicDir = path.join(__dirname, '') 

app.set('port', process.env.PORT || 3000) 
app.use(logger('dev')) 
app.use(bodyParser.json()) //parses json, multi-part (file), url-encoded 

app.get('/', function(req, res) { 
    res.sendFile(path.join(publicDir, 'index.html')) 
}) 

var server = http.createServer(app) 

//reload code here 
//optional reload delay and wait argument can be given to reload, refer to [API](https://github.com/jprichardson/reload#api) below 
reload(server, app, [reloadDelay], [wait]) 

server.listen(app.get('port'), function(){ 
    console.log("Web server listening on port " + app.get('port')); 
}); 

Answer 3

Die EADDRINUSE Fehler ist in der Regel aufgrund einer Verbindung bereits geöffnet auf dem angegeben Port. Dies ist wahrscheinlich auf eine vorherige Verbindung zurückzuführen, die beim Neustart der App nicht korrekt geschlossen wurde.

einen Blick auf this gist nehmen und insbesondere in so etwas wie dies in Ihrer schluck Datei versuchen:

'use strict'; 

var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var nodemon = require('gulp-nodemon'); 

gulp.task('default', ['browser-sync'], function() {}); 

gulp.task('browser-sync', ['nodemon'], function() { 
    browserSync.init(null, { 
     proxy: "http://localhost:3002" 
    }); 
}); 

gulp.task('nodemon', function (cb) { 

    var started = false; 

    return nodemon({ 
     script: 'app.js' 
    }).on('start', function() { 
     // to avoid nodemon being started multiple times 
     if (!started) { 
      cb(); 
      started = true; 
     } 
    }); 
}); 

Answer 4

@mateeyow richtig ist.

Aber wenn Sie möchten, dass der Browser automatisch neu lädt, benötigen Sie auch das Liveload-Plugin.

Webpack-Hot-Replacement aktivieren Ersetzen Sie nur Code im Browserspeicher, Liveload-Plugin lädt es neu.

Siehe Rock zum Beispiel: https://github.com/orange727/rock/blob/master/app/templates/webpack/webpack.make.js#L255

So wie:

webpackConfig.plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new LiveReloadPlugin({ 
    appendScriptTag: true, 
    port: config.ports.livereload, 
})];