Node.js - Auto Refresh In Dev

Question

Próbuję poprawić doświadczenie DEV w moim węźle. W tym celu chcę:
a) zresetować mój serwer po zmianie kodu po stronie serwera
b) odświeżyć przeglądarkę po zmianie kodu po stronie klienta.

Aby to osiągnąć, rozpocząłem integrację nodemon i browserSync w moim tekście gulp.

W moim scenariuszu haustem, Mam następujące zadanie:

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(); 
}); 

Gdy powyższe zadanie jest uruchamiane, moja przeglądarka otwiera się http://localhost:3000/. Moja aplikacja jest widoczna zgodnie z oczekiwaniami. Jednak w oknie konsoli zauważam:

Error: listen EADDRINUSE :::3002 

Rozumiem do pewnego stopnia. Mam app.set('port', process.env.PORT || 3002); w moim pliku server.js. Jednak myślałem, że to było celem ustawienia wartości proxy. Mimo to, ilekroć dokonać zmiany kodu, widzę następujące informacje dotyczące błędu w moim oknie konsoli:

[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) 

W tym momencie moje zmiany w kodzie nie pojawiają się w mojej przeglądarce. Nie rozumiem, co robię źle. Podejrzewam, że moje porty są źle skonfigurowane. Ale nie jestem pewien, jak powinny być skonfigurowane.

Domyślnie BrowserSync używa portu 3000. BrowserSync używa również portu 3001 dla interfejsu użytkownika BrowserSync. Z tych dwóch powodów myślałem, że ustawię port na 3002 w moim pliku server.js i utworzę serwer proxy pokazany powyżej. Co ja robię źle?

Answer 1

W rzeczywistości nie musisz używać łyka, aby to zadziałało.

a) ponownie uruchomić mój serwer, gdy kod po stronie serwera zostanie zmieniony

Install nodemon globalnie za pomocą npm i -g nodemon następnie w folderze app zrobić nodemon lub nodemon ${index-file-of-your-app}.

b) odśwież przeglądarkę po zmianie kodu po stronie klienta.

Użyj przeglądarki lub przeglądarki internetowej. Wolę używać webpacka; może być konieczne zapoznanie się z konfiguracją, ale zaletą pakietu internetowego jest to, że nie trzeba jej odświeżać. Po znalezieniu zmian zmiany zostaną automatycznie odzwierciedlone w przeglądarce. https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

Answer 2

Być może brakuje jakiegoś kontekstu (np. Nie jestem pewien, co reprezentuje input), jednak myślę, że moduł npm może rozwiązać Twój problem. Oto przykład ze strony pakietu NPM:

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

Błąd EADDRINUSE jest zwykle spowodowany otwartym już połączeniem na określonym porcie. Jest tak prawdopodobnie z powodu wcześniejszego nieudanego zamknięcia połączenia podczas ponownego uruchamiania aplikacji.

Spójrz na this gist aw szczególności spróbować czegoś takiego w pliku haustem:

'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 ma rację.

Ale jeśli chcesz automatycznie przeładować przeglądarkę, potrzebujesz również wtyczki livereload.

Włącz funkcję zastępowania przez hot pack tylko w pamięci przeglądarki, wtyczka livereload przeładowuje ją.

Zobacz skałę na przykład: https://github.com/orange727/rock/blob/master/app/templates/webpack/webpack.make.js#L255

Podobnie jak:

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