插件功能：用于根據指定目錄文件變化自動刷新指定頁面的 whistle 插件。

whistle?github.com

下文主要介紹livereload原理，直接查看插件安裝和使用請看第五步

一、需求背景：

前端頁面聯調時，F5作為web開發常用刷新調試驅動鍵，已經深深刻在每個開發的心中。還在為修改頁面不停的手動刷新而煩惱么？還在尋找其他F5替代方案么？如何優雅的釋放F5，請看下文~。

二、目標拆解：

假如我們自己來開發一種替代F5的文件刷新方案，可以從三個目標來分析：

1）文件修改監聽——目標是刷新頁面，但頁面刷新的前提是代碼的變動修改，捕捉文件修改事件成為我們優先解決的問題；

2）頁面刷新——頁面刷新很簡單，但是如何通知到頁面進行刷新呢；

3）修改通知——這個是我們需要解決的重點；

三、解決方案（whistle插件采用fs而非gulp，此處借gulp簡單介紹下原理）：

有了問題和目標，思考下每個問題的解決方案：

1）文件修改監聽——

a、gulp非常nice的自動化構建工具

官網：https://www.gulpjs.com.cn/

b、node的fs模塊（livereload插件通過fs模塊實現監控）

c、其他

2）頁面刷新——js方法，location.reload(x);

3）修改通知——開啟本地svr，瀏覽器長鏈接監聽（常用的觀察者模式）；

基于node svr+websock服務

四、開發實戰：

方案已經枚舉好，接下來就是開發實踐：

（一）環境準備和代碼實現（代碼可在附件下載）：

1）項目目錄下，安裝需要的js模塊

npm i -s gulp npm i -s ws

2）服務端代碼編寫

const WebSocket = require('ws'); const port = 8080; function startSvr() {console.log("start svr port:"+port);var wss = new WebSocket.Server({port: port});var connection = {};wss.on('connection', function(ws) {console.log("ws 已經連接");ws.on('message', function(message) {console.log("收到message:"+message);msg = JSON.parse(message);if (msg.type === 'test') {connection[msg.id] = ws;console.log('received: %s', JSON.stringify(msg));if (!!connection[msg.id]) connection[msg.id].send(JSON.stringify(msg));} else {wss.clients.forEach(function each(client) {client.send(message);});}});}); } module.exports = {start:startSvr };

3）客戶端監聽代碼編寫

var ws = new WebSocket('ws://localhost:8080'); ws.onopen = function() {console.log('open'); }; ws.onclose = function() {console.log('onclose'); }; ws.onmessage = function(event) {console.log('event,', event.data); //拿到的返回數據var json = JSON.parse(event.data);if(json.command=="reload"){location.reload(1);}else if(json.command=="javascript"){eval(json.text);}else if(json.command=="replace"){document.getElementsByTagName("html")[0].innerHTML = json.text;} };

4）gulp監聽配置文件編寫（此處gulp采用4.0.2版本）

const {series,parallel,watch,src,dest } = require('gulp'); const WebSocket = require('ws'); const appsvr = require('./appsvr.js'); const watcher = watch(['*']);//此處監聽目錄下所有文件 // const fs = require('fs'); let ws = ""; //日志工具類 let showlog = function (svr) {var des = "";for (var name in svr) {des += name + ":" + svr[name] + ";n";}console.log(des); }; //服務開啟 function webserver() {appsvr.start();setTimeout(function () {ws = new WebSocket('ws://localhost:8080');ws.on('open', () => {let msg = {command: 'init',text: ""};ws.send(JSON.stringify(msg));});ws.on('error', err => {console.log(err);});ws.on('message', data => {console.log(data);});ws.on('close', (code, reason) => {console.log(code);console.log(reason + ':' + typeof reason);});}, 2000); } //監聽文件變化 watcher.on('change', function (path, stats) {console.log(`File ${path} was changed`);//發送給監聽者的動作let msg = {command: 'reload',text: "reload"};ws.send(JSON.stringify(msg)); }); exports.webserver = webserver; //默認出發，相當于main函數 exports.default = parallel(function () {console.log("running"); }, webserver);

5）客戶端js監聽文件如何嵌入頁面？

a、通過script標簽的方式手動嵌入，需要手動修改文件，且事后容易忘記刪除；

<script type=“text/javascript” src=“./f5.js”></script>

b、基于whistle的優雅嵌入，會自動對匹配的頁面（html）無感知嵌入指定js：

whistle 命令：jsAppend

daoju.qq.com/xxx/ jsAppend://daoju.qq.com/xxx/js/f5.js

6）啟動服務，刷新瀏覽器啟動監聽

7）文件修改，觀察效果

（二）其他解決方案實現及問題：

其他常用方案：

實現和問題：

• 實現方式：通過插件生成的本地服務地址來進行自動刷新訪問，比如：

訪問localhost:3000，查看本地未分離文件，適合重構開發；

• 問題：活動開發前端聯調是以線上活動域名url訪問來進行開發和測試，且需要配合host配置，就不太適合。

五、基于whistle的livereload插件，讓刷新更優雅

通過上述實踐我們釋放了F5，但是打開項目目錄，發現新增了一堆的js，跟我們的項目格格不入，如何更優雅的釋放F5呢？

whistle插件化——目前已經開發整理成了whistle插件，地址如下：

npm地址：https://npm.taobao.org/package/whistle.livereload

1）如何安裝：

注意：whistle需要升級到最新版本

npm i -g whistle.livereload

安裝后：

2）使用方案：

#pattern whistle.livereload://需要監控的項目目錄 daoju.qq.com/xxx/ whistle.livereload://D:xxx

相關文章：

whistle的使用介紹和開發：

whistle的官方文檔——http://wproxy.org/whistle/rules/htmlAppend.html

---

騰訊技術工程來到知乎啦。本號立足于計算機以及互聯網領域技術相關話題，特別是前沿領域的探索，目的是為技術愛好者提供專業、有見解的技術話題，將鵝廠最新的技術文章傳遞給知友，同時為研究人員提供討論和參與的開放平臺，共建技術生態圈。

騰訊技術工程未來也會邀請廣大的鵝廠技術人員，作為我們的智囊團，為知友解答工作中的技術困惑，同時也請大家多多為我們仔細準備的回答點個『贊』，讓我們在分享和鼓勵中共同進步。有任何建議，歡迎私信我們！

更多技術干貨請持續關注『騰訊技術工程』知乎號以及訂閱我們的專欄『騰訊技術』。

總結

以上是生活随笔為你收集整理的this.$router.push如何刷新页面_【前端技术】如何优雅的释放F5（基于whistle的livereload）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。