如何將實時重新加載添加到我的 nodejs 服務器

Question

這是我如何運行我的服務器 nodejs。 當我對前端開發中的代碼進行更改時，我需要實時重新加載我的服務器

"start": "node server.js"

Answer 1

首先：

npm install -g nodemon

接下來在你的 package.json 中添加一個腳本行

"live": "nodemon server.js" 

現在當你 npm live 時，它​​會重新加載

有關更多詳細信息，請參閱https://github.com/remy/nodemon

如果還需要重新加載實時頁面，請更新

npm install -g livereload
livereload . -w 1000 -d

有關更多詳細信息，請參閱https://github.com/napcs/node-livereload

Answer 2

重啟服務器是一回事，刷新瀏覽器是另一回事。 對於服務器觀看，我使用 nodemon。 Nodemon 可以看到任何類型的文件何時發生更改。 但是 nodemon 無法刷新瀏覽器頁面。 為此，我使用瀏覽器同步。

我在 gulp 中同時使用兩者。

因此，依賴 package.json 使其工作：

"devDependencies": {
"browser-sync": "^2.24.5",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}

在服務器文件中（我的服務器在 ./bin/www 中，你的可以在 server.js、app.js 或其他地方），express server 監聽端口 3001。

var port = normalizePort(process.env.PORT || '3001');
var server = http.createServer(app);
server.listen(port);

接下來是在 gulp 中運行 nodemon 和瀏覽器同步。 gulpfile.js 的全部內容

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

gulp.task('gulp_nodemon', function() {
  nodemon({
    script: './bin/www', //this is where my express server is
    ext: 'js html css', //nodemon watches *.js, *.html and *.css files
    env: { 'NODE_ENV': 'development' }
  });
});

gulp.task('sync', function() {
  browserSync.init({
    port: 3002, //this can be any port, it will show our app
    proxy: 'http://localhost:3001/', //this is the port where express server works
    ui: { port: 3003 }, //UI, can be any port
    reloadDelay: 1000 //Important, otherwise syncing will not work
  });
  gulp.watch(['./**/*.js', './**/*.html', './**/*.css']).on("change", browserSync.reload);
});

gulp.task('default', ['gulp_nodemon', 'sync']);

在終端中運行 gulp 時，它將開始監視服務器並在任何文件發生變化時刷新瀏覽器。

盡管我們在 express 服務器中指定了端口 3001，但我們的應用程序將在端口 3002 上工作，正如我們在瀏覽器同步中所寫的那樣。 3001 將用作代理。

Answer 3

npm install browser-refresh -g

並添加您的主要js

 if (process.send) {
     process.send('online');
 }

例如

app.listen(port, function() {
    console.log('Listening on port %d', port);

    if (process.send) {
        process.send('online');
    }
});

並在正文結束標記之前添加您的索引頁。

<script src="{process.env.BROWSER_REFRESH_URL}"></script>

並在終端而不是節點 server.js 上啟動您的服務器

browser-refresh server.js

Answer 4

我的設置中的一個示例：

livereload.js（所以這就是你的server.js，當然只使用livereload相關的部分，不需要更換你的開發服務器）

const path = require('path');
const fs = require('fs');

const livereload = require('livereload');
const lrserver = livereload.createServer();

const compiled = path.join( __dirname, "dist");
lrserver.watch( compiled ); 

const connect = require('connect');
const stat = require('serve-static');

const server = connect();
server.use( stat( compiled ));

server.listen( 3033 );

console.log( 'Dev server on localhost:3033' );

它實際上在 localhost 上啟動了兩個服務器：livereload 服務器偵聽:35729和靜態文件服務器:3033 。

Livereload 觀察包含編譯文件（js、css、html）的dist目錄。 您需要將此代碼段添加到應該重新加載的每個 HTML 頁面：

<script>
 document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
                ':35729/livereload.js?snipver=1"></' + 'script>');
</script>

如果您不轉譯/編譯/預處理您的 js/css/html 代碼（即您直接編輯提供的文件），則觀察源目錄並完成。 否則你需要一個任務來觀察源目錄的變化並編譯到 livereload 觀察到的 dist 目錄:)

我的 package.json 的相關部分：

"scripts": {
    "build": "npm run build:js && npm run build:css",
    "prewatch": "node livereload.js &",
    "watch": "node ./node_modules/watch-run/bin/watch -p './src/**' npm run build",
  },
"devDependencies": {
    "connect": "^3.6.2",
    "livereload": "^0.6.2",
    "serve-static": "^1.12.3",
    "watch-run": "^1.2.5"
  }

$ npm run watch構建項目並啟動 livereload + 靜態文件服務器。 （為簡潔起見省略了build:*任務）。

Answer 5

您可以使用“livereload”、“connect-livereload”和“nodemon”包將前端和后端更改實時重新加載到瀏覽器。 這樣你就不需要 Gulp。 以下是這些包的組合方式：

• livereload打開一個高端口並通知瀏覽器更改的公共文件
• connect-livereload猴子使用連接到此高端口的代碼段修補每個服務的 HTML 頁面
• nodemon在更改的后端文件上重新啟動服務器

在 Express 中設置 livereload

設置 Express 以啟動 livereload 服務器以觀察公共目錄並在nodemon引起的重啟期間 ping 瀏覽器：

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

使用 nodemon 啟動 Express

使用 nodemon 啟動服務器，例如，使用專用的監視腳本npm run watch 。

這里的關鍵點是忽略已經被 livereload 監視的公共目錄。 您還可以配置具有非默認擴展名的文件，例如 pug 和 mustache，以進行監視。

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

您可以在“使用 Express、LiveReload 和 Nodemon 刷新瀏覽器的前端和后端更改”中閱讀更長的解釋。

Answer 6

使用名為livereload的 npm 包。

將它與nodemon結合使用，這樣客戶端和服務器端都可以完美地工作。

npm install livereload nodemon --save

--保存開發。 我知道，我知道！

添加瀏覽器擴展。 適用於 Safari、Firefox 和 Google Chrome。 把它們弄到這里。

確保在package.json有這個腳本。

  "scripts": {
"start": "nodemon server.js && livereload"

}

server.js是我的切入點。

在server.js添加以下內容：

const livereload = require('livereload');
const reload = livereload.createServer();
reload.watch(__dirname + "/server.js");

server.js是我想要 livereload 觀看的文件。 您也可以添加任何目錄而不是文件。

reload.watch(__dirname + "/public");

在終端中： npm start

單擊瀏覽器中的擴展圖標進行連接。

您也可以在不同的終端中分別使用 livereload 和 nodemon。

"scripts": {
    "start": "nodemon server.js",
    "livereload": "livereload"
  }

npm start

npm livereload

npm livereload -p PORT_NUMBER如果默認端口已被使用。

更新：有時它不能保存一次。 再次按 Ctrl+S 重新加載並進行更改。 我不知道這是瀏覽器緩存問題還是包問題。

Answer 7

如果使用grunt ，有一個 npm 包grunt-contrib-watch用於實時重新加載。

查看另一個可以協同工作的名為grunt-express-server 。

Answer 8

您可以使用nodemon 。
它將監視您的項目文件並在您更改它們時重新啟動服務器。

您可以全局安裝它：

npm install -g nodemon

在您的項目目錄上運行它

cd ./my-project
nodemon

---

您還可以將其添加到項目的開發依賴項中，並從 npm 腳本中使用它：

npm install --save-dev nodemon

然后在你的package.json添加一個簡單的腳本：

"scripts": {
    "start": "node server.js",
    "dev": "nodemon"
}

那么你可以簡單地運行以下命令：

npm run dev