問題描述
我正在嘗試改善我的 Node.js 中的 DEV 體驗.為此,我想:
a) 更改服務器端代碼時重新啟動我的服務器
b) 當客戶端代碼發生變化時刷新瀏覽器.
為了實現這一點,我開始集成 nodemon 和browserSync 到我的 gulp 腳本中.
I am trying to improve the DEV experience in my Node. To do that, I want to:
a) restart my server when server-side code is changed
b) refresh the browser when client-side code is changes.
In an effort to accomplish this, I began integrating nodemon and browserSync into my gulp script.
在我的 gulp 腳本中,我有以下任務:
In my gulp script, I have the following task:
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();
});
當上述任務運行時,我的瀏覽器會打開 http://localhost:3000/.我的應用程序按預期可見.但是,在控制臺窗口中,我注意到:
When the above task runs, my browser opens to http://localhost:3000/. My app is visible as expected. However, in the console window, I notice:
Error: listen EADDRINUSE :::3002
我在某種程度上理解.我的 server.js 文件中有 app.set('port', process.env.PORT || 3002);
.然而,我認為這是設置代理值的目的.盡管如此,每當我更改代碼時,我都會在控制臺窗口中看到以下相關錯誤:
I understand to some extend. I have app.set('port', process.env.PORT || 3002);
in my server.js file. Yet, I thought that was purpose of setting the proxy value. Still, whenever I make a code change, I see the following related error in my console window:
[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)
此時,我的代碼更改不會出現在我的瀏覽器中.我不明白我做錯了什么.我懷疑我的端口配置錯誤.但是,我不確定它們應該如何設置.
At this point, my code changes do not appear in my browser. I do not understand what I'm doing wrong. I suspect I have my ports misconfigured. But, I'm not really sure how they should be setup.
默認情況下,BrowserSync 使用端口 3000.BrowserSync 還為 BrowserSync UI 使用端口 3001.由于這兩個原因,我想我應該在 server.js 文件中將端口設置為 3002 并創建上面顯示的代理.我做錯了什么?
By default BrowserSync uses port 3000. BrowserSync also uses port 3001 for the BrowserSync UI. For these two reasons, I thought I would set the port to 3002 in my server.js file and create the proxy shown above. What am I doing wrong?
推薦答案
你實際上不需要使用 gulp 來工作.
You actually don't need to use gulp for this to work.
a) 更改服務器端代碼時重新啟動我的服務器
a) restart my server when server-side code is changed
使用 npm i -g nodemon
全局安裝 nodemon,然后在您的應用文件夾中執行 nodemon
或 nodemon ${index-file-of-your-app}代碼>.
Install nodemon globally using npm i -g nodemon
then on your app folder do nodemon
or nodemon ${index-file-of-your-app}
.
b) 當客戶端代碼發生變化時刷新瀏覽器.
b) refresh the browser when client-side code is changes.
使用 browserify 或 webpack.我更喜歡使用 webpack;你可能需要稍微了解一下配置,但是 webpack 的好處是你不需要刷新它.一旦發現更改,更改將自動反映在瀏覽器上.https://github.com/webpack/docs/wiki/hot-module-replacement-與-webpack
Use browserify or webpack. I prefer using webpack; you may need to learn about the configuration a little bit but the good thing with webpack is that you don't need to refresh it. Once changes are found the changes will be reflected on the browser automatically. https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
這篇關于Node.js - 開發中的自動刷新的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!