摘要：本文有點(diǎn)大哈，相較于目前國(guó)內(nèi)正流行起來(lái)的前端后移的前后端分離方案，本文介紹是一種低碳的版本，所以不要糾結(jié)于這個(gè)的正確性哈。碰到問(wèn)題先看看有沒(méi)有你的答案資源匯總推薦低碳的前端服務(wù)器工具推薦常用遠(yuǎn)程調(diào)試工具推薦工具，快速跳轉(zhuǎn)到最常用的目錄。

本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。

前幾天，跟一同事(MIHTool作者)討教了一下開(kāi)發(fā)調(diào)試工具。其實(shí)個(gè)人覺(jué)得相較于定制一個(gè)類似MIHTool的Hybrid App容器，基于長(zhǎng)連的B/S架構(gòu)的工具其實(shí)會(huì)是一個(gè)更輕量的解決方案。此文會(huì)分享一下超簡(jiǎn)單工具puer，以及如何利用它在產(chǎn)品開(kāi)發(fā)的各階段實(shí)現(xiàn)高效的開(kāi)發(fā)。

本文title有點(diǎn)大哈，相較于目前國(guó)內(nèi)正流行起來(lái)的前端后移的前后端分離方案，本文介紹是一種“低碳”的版本，所以不要糾結(jié)于這個(gè)Title的正確性哈。

簡(jiǎn)介
簡(jiǎn)而言之，Puer是一個(gè)可以實(shí)時(shí)編輯刷新的前端服務(wù)器。特性一覽:

提供一個(gè)當(dāng)前或指定路徑的靜態(tài)服務(wù)器

所有瀏覽器的實(shí)時(shí)刷新：編輯css實(shí)時(shí)更新(update)頁(yè)面樣式，其它文件則重載(reload)頁(yè)面

提供簡(jiǎn)單熟悉的mock請(qǐng)求的配置功能，并且配置也是自動(dòng)更新。

可用作代理服務(wù)器，調(diào)試開(kāi)發(fā)既有服務(wù)器的頁(yè)面，可與mock功能配合使用

集成了weinre，并提供二維碼地址，方便移動(dòng)端的調(diào)試

可以作為connect中間件使用(前提是后端為nodejs，否則請(qǐng)使用代理模式)

可以發(fā)現(xiàn)這里功能并不多，但羅列的基本都是實(shí)際前端開(kāi)發(fā)中會(huì)涉及到的。可能敏銳的朋友會(huì)點(diǎn)出，同類的browser-sync提供了更強(qiáng)的操作同步的功能。這點(diǎn)其實(shí)主要不想去盲目攀比功能(實(shí)現(xiàn)其實(shí)并不難，因?yàn)榛A(chǔ)的注入腳本已經(jīng)做了，剩下的都只是功能堆砌)，目前的出發(fā)點(diǎn)都是作者實(shí)際的需求(好吧，其實(shí)是懶)。還有就是，其實(shí)puer誕生比它要早一年多。

讓我們開(kāi)始使用吧
安裝
確保你安裝了nodejs（現(xiàn)在還有沒(méi)nodejs環(huán)境的前端？ 拖出去喂狗吧）

使用npm全局安裝puer命令

npm install puer -g
輸入puer -h可以查看Help

Usage: puer [options...]Options:
-p,--port server"s listen port, 8000 default
-f,--filetype fileType to watch(split with "|"), defualt "js|css|html|xhtml"
-d,--dir your customer working dir. default current dir
-i,--inspect start weinre server and debug all puer page
-x,--exclude exclude file under watching(must be a regexp), default: ""
-a,--addon your addon"s path
-t,--target proxy url

 --no-reload       close  auto-reload feature,(not recommended)
 --no-launch       close the auto launch feature

-h,--help help list
強(qiáng)烈中文即時(shí)感的英語(yǔ)相信和大家交流起來(lái)不會(huì)很困難。

使用

90%的使用場(chǎng)景下

cd /path/to/workspace ?
puer ?
puer會(huì)默認(rèn)為你打開(kāi)http://localhost:8000頁(yè)面(端口可以 -p 8001參數(shù)進(jìn)行控制)，并貼心的幫你列出了所有你本地可用的ip以及當(dāng)前的地址二維碼，方便手機(jī)訪問(wèn)。

編輯當(dāng)前路徑下的文件，會(huì)實(shí)時(shí)更新頁(yè)面(無(wú)論你在多少臺(tái)電腦打開(kāi)多少個(gè)頁(yè)面)。

關(guān)于如何命令行下快速到達(dá)工作目錄，作者推薦兩個(gè)工具

z: 必裝shell工具，快速進(jìn)入最常用目錄

sublime-terminal: 直接進(jìn)入當(dāng)前文件或工程的所在路徑

在開(kāi)發(fā)靜態(tài)頁(yè)面時(shí)，這個(gè)簡(jiǎn)單的功能意義非凡，特別是雙屏的時(shí)候，可以完全解放你的F5鍵。關(guān)鍵是：

保存后看到瀏覽器同步刷新，有種莫名的愉悅感涌上心頭有木有？

作者簡(jiǎn)單將這種現(xiàn)象歸結(jié)于之前看到的一篇文章：【人無(wú)法在兩種思維模式下進(jìn)行高效切換】，猜想這可能這和CPU的進(jìn)程切換是一樣一樣的。

進(jìn)階1 mock請(qǐng)求
假設(shè)你的靜態(tài)頁(yè)面開(kāi)發(fā)到一定程度，需要與服務(wù)器端交互了，而后臺(tái)服務(wù)還完全無(wú)法聯(lián)調(diào)，這其實(shí)是屬于最簡(jiǎn)單的前后端分離開(kāi)發(fā)的場(chǎng)景。一般而言， 作者會(huì)通過(guò)以下幾種方案。

層級(jí)1: 通過(guò)代碼解耦，直接在前端mock數(shù)據(jù)

這種方式影響較大，而且無(wú)論你解耦的如何，都會(huì)增加最終上真實(shí)環(huán)境的切換成本。

層級(jí)2: 通過(guò)fiddler等調(diào)試代理工具mock數(shù)據(jù)

優(yōu)點(diǎn)是到正式環(huán)境的切換成本小，但配置成本較大，也接口mock也有局限性并基本上只能是靜態(tài)數(shù)據(jù)模擬。

層級(jí)3：利用puer無(wú)痛的解決這個(gè)問(wèn)題

puer提供了叫插件(addon)的功能，集成了express的route.js來(lái)達(dá)到最簡(jiǎn)的路由配置，可以提供基于真實(shí)http請(qǐng)求與相應(yīng)的動(dòng)態(tài)的mock數(shù)據(jù)。

puer -a route.js
route.js 這么寫(xiě)

// use addon to mock http requestmodule.exports = { // GET
"GET /v1/posts/:id": function(req, res, next){ // response json format

res.send({
  title: "title changed",
  content: "tow post hahahah"
})

}, // PUT POST DELETE is the same
"PUT /v1/posts/:id": function(){

}, "POST /v1/posts": function(){

}, "DELETE /v1/posts/:id": function(){

}
}%
它其實(shí)就是一段nodejs程序，輸出是一配置對(duì)象，key的空格前代表的是請(qǐng)求Method，后半部分是請(qǐng)求路徑，而value代表回調(diào)函數(shù)和express的路由中間件是一致的，傳入的request和response對(duì)象，相較于原生的提供了一些額外方法，不了解的也可以戳這里

【戳這里看演示GIF】

通過(guò)演示其實(shí)你可以發(fā)現(xiàn)，編輯route.js后，這份配置腳本是動(dòng)態(tài)更新的，免去了你一次次重啟服務(wù)器的工作。

進(jìn)階2：使用代理模式，應(yīng)用puer到以有服務(wù)器中
開(kāi)發(fā)進(jìn)行到一定階段，一般后端服務(wù)就逐步進(jìn)入了，靜態(tài)頁(yè)面的開(kāi)發(fā)不再適用。到這個(gè)時(shí)候，我們可以使用--target path切換到代理模式將puer作為一個(gè)代理服務(wù)器使用。

比如本地已經(jīng)存在一個(gè)localhost:8020的服務(wù)，你要在其上實(shí)現(xiàn)自動(dòng)刷新的功能，請(qǐng)使用-t 或 --target。

puer -t http://localhost:8020
【請(qǐng)戳演示GIF】

需要注意的是，進(jìn)階2提到的addon是可以和這個(gè)模式配合使用，這使得我們?cè)诤笈_(tái)服務(wù)青黃不接的時(shí)候率先開(kāi)發(fā)完前端功能，深藏功與名。

puer -t http://localhost:8020 -a route.js
【請(qǐng)戳target配合addon的演示】

進(jìn)階3： 使用weinre調(diào)試所有經(jīng)過(guò)puer的頁(yè)面
weinre是目前最常用的遠(yuǎn)程調(diào)試工具，它雖然幾乎無(wú)法調(diào)試JS，但是由于和平臺(tái)、瀏覽器無(wú)關(guān)的特性，使得這個(gè)低效的工具一直流行至今，也有很多工具集成了它，比如我之前提到的MIHTool。

不過(guò)要使用weinre，你需要在每個(gè)調(diào)試的頁(yè)面插入一個(gè)記不住名字的腳本，并開(kāi)啟weinre服務(wù)，這都屬于重復(fù)性勞動(dòng)。puer通過(guò) -i flag來(lái)開(kāi)啟 weinre的內(nèi)置集成，每一個(gè)經(jīng)過(guò)puer的頁(yè)面都會(huì)被自動(dòng)注入腳本。你可以在9001端口找到你的weinre服務(wù)，也可以通過(guò)puer的初始頁(yè)面進(jìn)入

puer -i
【請(qǐng)戳inspect的演示】

進(jìn) 階4： 作為中間件來(lái)應(yīng)用與nodejs作為后臺(tái)的產(chǎn)品
這個(gè)功能其實(shí)并不常用了，它將puer作為express/connect服務(wù)器的中間件來(lái)使用，先貼個(gè)代碼范例。

var connect = require("connect")var path = require("path")var http = require("http")var puer = require("puer")var app = connect()var server = http.createServer(app)var options = {

dir: "path/to/watch/folder", 
ignored: /(/|^)..*|node_modules/  //ignored file}

app.use(puer.connect(app, server , options)) //use as puer connect middleware// you must use puer middleware before route and static midleware(before any middle may return "text/html")app.use("/", connect.static(__dirname))

server.listen(8001, function(){ console.log("listen on 8001 port")
})
一般你在development環(huán)境開(kāi)啟它，而在product環(huán)境關(guān)閉即可，需要注意的是它必須放在可能輸出html的中間件之前。

一個(gè)簡(jiǎn)單的puer命令可以帶你在各個(gè)開(kāi)發(fā)階段自由飛翔，還不趕緊試一下？

寫(xiě)在最后
名字含義 ： puer意為普洱，除了愛(ài)喝和夠短沒(méi)有任何含義，懶得取名罷了。

寫(xiě)puer的原動(dòng)力是作者對(duì)f5網(wǎng)頁(yè)免刷新工具欲求不滿（況且它如此簡(jiǎn)單的功能還需要開(kāi)啟一個(gè)桌面gui完全不能忍是么），所以功能抉擇上帶有一些主觀性。如果你試用后，覺(jué)得它有價(jià)值并有改進(jìn)余地，可以在issues下留下你的灼見(jiàn)(必須先來(lái)一發(fā)star)。

碰到問(wèn)題先puer -h看看有沒(méi)有你的答案

資源匯總
puer（推薦）: “低碳”的前端服務(wù)器工具

weinre(推薦): 常用遠(yuǎn)程調(diào)試工具

z(推薦): Shell工具，快速跳轉(zhuǎn)到最常用的目錄。

browser-sync: 包含puer的部分功能，同時(shí)提供多頁(yè)面的操作同步(跳轉(zhuǎn)、表單)

MIHTool:MIHTool是前端工程師在iOS設(shè)備上調(diào)試和優(yōu)化頁(yè)面的得力助手（原slogan）

sublime-terminal: 快速打開(kāi)sublime工程或當(dāng)前文件目錄

f5網(wǎng)頁(yè)免刷新工具：基于air的免刷新gui工具，習(xí)慣windows的gui工具的童鞋可以試用下。

文章來(lái)源： 網(wǎng)易云社區(qū)