前言

前不久我結合browser-sync+gulp+gulp-nodemon實現(xiàn)了一款生產(chǎn)環(huán)境熱更新(我之前理解有點偏差，應該定義為熱更新，不是熱重載)的項目腳手架，那么，今天我們將使用Node.js實現(xiàn)一個熱重載頁面。

創(chuàng)新互聯(lián)服務項目包括貴池網(wǎng)站建設、貴池網(wǎng)站制作、貴池網(wǎng)頁制作以及貴池網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，貴池網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到貴池省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

那么，我今天就總結一下吧，以防止大家也跟我一樣。

熱重載

所謂熱重載就是頁面每次改動，不需要手動去刷新，可自動刷新。

熱更新

瀏覽器的無刷新更新，允許在運行時替換，添加，刪除各種模塊，而無需進行完全刷新重新加載整個頁面。

目的：加快開發(fā)速度，所以只適用于開發(fā)環(huán)境下使用。

思路：保留在完全重新加載頁面時丟失的應用程序的狀態(tài)，只更新改變的內容，以節(jié)省開發(fā)時間，調整樣式更加快速，幾乎等同于在瀏覽器調試器中更改樣式。

實戰(zhàn)

一、初始化項目

這里使用以下命令初始化項目。這里使用-y后綴我是為了更快更方便地初始化，如果你想自定義的話，可以一行一行的敲。

 
 
 

  
  
  
npm init -y 
 
 
 

初始化完成，根目錄下多了一個package.json文件。

二、創(chuàng)建Node主文件app.js

下面，我們將創(chuàng)建一個Nodejs操作主文件app.js。

 
 
 

  
  
  
const http = require('http'); 
  
  
  
const express = require('express'); 
  
  
  
const app = express(); 
  
  
  
const server = http.createServer(app); 
  
  
  
const path = require('path'); 
  
  
  
const fs = require('fs'); 
  
  
  
const io = require('socket.io')(server); 
  
  
  
 
  
  
  
app.use(express.static(path.join(__dirname, './public'))); 
  
  
  
createWatcher(); 
  
  
  
 
  
  
  
function createWatcher() { 
  
  
  
  const absolute = './public'; 
  
  
  
  fs.watch(absolute, function (eventType, filename) { 
  
  
  
    if (filename) { 
  
  
  
      io.sockets.emit('reload'); 
  
  
  
    } 
  
  
  
  }); 
  
  
  
} 
  
  
  
 
  
  
  
server.listen(8086, function () { 
  
  
  
  console.log(`The server is running on port 8086.`); 
  
  
  
}); 
 
 
 

首先，我們使用http、express結合創(chuàng)建了一個http服務器，又同時與socket.io綁定。然后我們又利用express托管靜態(tài)文件，指定靜態(tài)文件目錄public。我們這里使用了fs模塊下的watch方法，用于監(jiān)聽文件目錄的變化。如果目錄下的文件改變了，那么就會觸發(fā) io.sockets.emit('reload');這行代碼。既然觸發(fā)了那肯定要有地方監(jiān)聽。

三、創(chuàng)建index.html文件

我們會在根目錄下創(chuàng)建一個public文件夾，文件夾內創(chuàng)建一個index.html文件。

 
 
 

  
  
  
 
  
  
  
 
  
  
  
   
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
   
  
  
  
   
  
  
  
    
Hello
 
  
  
  
    文本
 
  
  
  
    
 
  
  
  
      
1
 
  
  
  
      
2
 
  
  
  
      
3
 
  
  
  
      
4
 
  
  
  
    
 
  
  
  
    
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
   
  
  
  
 
 
 
 

文件內容如上，我們首先需要關注的是怎么與后臺監(jiān)聽，我們只需要引入socket.io.min.js文件(文件我會在文末給出源碼地址)，然后在下面鍵入以下代碼：

 
 
 

  
  
  
io.connect('http://localhost:8086/').on('reload', () =>window.location.reload()); 
 
 
 

http://localhost:8086/ 這是后臺的地址，需要監(jiān)聽這個地址，才能跟后臺進行通信。因為后臺我們自定義了一個reload事件，前臺也只需要監(jiān)聽這個事件。如果后臺觸發(fā)了這個事件，那么前臺就會監(jiān)聽到，隨機執(zhí)行代碼。

四、創(chuàng)建其他類型的文件

我們可以在上面的index.html文件中看到了我外部引入了index.js文件與style.js文件。主要是檢測如果改變其中的代碼，頁面是否也相應的改變，答案是肯定的。

五、實時更新頁面

我們首先啟動項目。

 
 
 

  
  
  
node app.js 
 
 
 

會看到終端下會顯示The server is running on port 8086.，然后就可以在瀏覽器打開http://localhost:8086/這個地址。我們更改下代碼，就可以看下頁面實時顯示，并且是按下快捷鍵保存代碼時(這里推薦編輯器不要實時自動保存代碼)，頁面就實時更新。

這樣是不是很省事了，不會每次切換頁面點擊刷新頁面了。想當初使用JQ寫頁面時，當初真是覺得自己太傻了，每次都重復勞動。

結語

謝謝閱讀，希望沒有浪費你的時間。

源碼地址：https://gitee.com/maomincoding/hot-load

網(wǎng)站標題：【前端自動化】如何使用Node.js實現(xiàn)熱重載頁面
文章位置：http://www.dlmjj.cn/article/cdjggcp.html