摘要：本文有點大哈，相較于目前國內正流行起來的前端后移的前后端分離方案，本文介紹是一種低碳的版本，所以不要糾結于這個的正確性哈。碰到問題先看看有沒有你的答案資源匯總推薦低碳的前端服務器工具推薦常用遠程調試工具推薦工具，快速跳轉到最常用的目錄。

本文由作者鄭海波授權網易云社區發布。

前幾天，跟一同事(MIHTool作者)討教了一下開發調試工具。其實個人覺得相較于定制一個類似MIHTool的Hybrid App容器，基于長連的B/S架構的工具其實會是一個更輕量的解決方案。此文會分享一下超簡單工具puer，以及如何利用它在產品開發的各階段實現高效的開發。

本文title有點大哈，相較于目前國內正流行起來的前端后移的前后端分離方案，本文介紹是一種“低碳”的版本，所以不要糾結于這個Title的正確性哈。

簡介
簡而言之，Puer是一個可以實時編輯刷新的前端服務器。特性一覽:

提供一個當前或指定路徑的靜態服務器

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

提供簡單熟悉的mock請求的配置功能，并且配置也是自動更新。

可用作代理服務器，調試開發既有服務器的頁面，可與mock功能配合使用

集成了weinre，并提供二維碼地址，方便移動端的調試

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

可以發現這里功能并不多，但羅列的基本都是實際前端開發中會涉及到的。可能敏銳的朋友會點出，同類的browser-sync提供了更強的操作同步的功能。這點其實主要不想去盲目攀比功能(實現其實并不難，因為基礎的注入腳本已經做了，剩下的都只是功能堆砌)，目前的出發點都是作者實際的需求(好吧，其實是懶)。還有就是，其實puer誕生比它要早一年多。

讓我們開始使用吧
安裝
確保你安裝了nodejs（現在還有沒nodejs環境的前端？ 拖出去喂狗吧）

使用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
強烈中文即時感的英語相信和大家交流起來不會很困難。

使用

90%的使用場景下

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

編輯當前路徑下的文件，會實時更新頁面(無論你在多少臺電腦打開多少個頁面)。

關于如何命令行下快速到達工作目錄，作者推薦兩個工具

z: 必裝shell工具，快速進入最常用目錄

sublime-terminal: 直接進入當前文件或工程的所在路徑

在開發靜態頁面時，這個簡單的功能意義非凡，特別是雙屏的時候，可以完全解放你的F5鍵。關鍵是：

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

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

進階1 mock請求
假設你的靜態頁面開發到一定程度，需要與服務器端交互了，而后臺服務還完全無法聯調，這其實是屬于最簡單的前后端分離開發的場景。一般而言， 作者會通過以下幾種方案。

層級1: 通過代碼解耦，直接在前端mock數據

這種方式影響較大，而且無論你解耦的如何，都會增加最終上真實環境的切換成本。

層級2: 通過fiddler等調試代理工具mock數據

優點是到正式環境的切換成本小，但配置成本較大，也接口mock也有局限性并基本上只能是靜態數據模擬。

層級3：利用puer無痛的解決這個問題

puer提供了叫插件(addon)的功能，集成了express的route.js來達到最簡的路由配置，可以提供基于真實http請求與相應的動態的mock數據。

puer -a route.js
route.js 這么寫

// 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(){

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

【戳這里看演示GIF】

通過演示其實你可以發現，編輯route.js后，這份配置腳本是動態更新的，免去了你一次次重啟服務器的工作。

進階2：使用代理模式，應用puer到以有服務器中
開發進行到一定階段，一般后端服務就逐步進入了，靜態頁面的開發不再適用。到這個時候，我們可以使用--target path切換到代理模式將puer作為一個代理服務器使用。

比如本地已經存在一個localhost:8020的服務，你要在其上實現自動刷新的功能，請使用-t 或 --target。

puer -t http://localhost:8020
【請戳演示GIF】

需要注意的是，進階2提到的addon是可以和這個模式配合使用，這使得我們在后臺服務青黃不接的時候率先開發完前端功能，深藏功與名。

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

進階3： 使用weinre調試所有經過puer的頁面
weinre是目前最常用的遠程調試工具，它雖然幾乎無法調試JS，但是由于和平臺、瀏覽器無關的特性，使得這個低效的工具一直流行至今，也有很多工具集成了它，比如我之前提到的MIHTool。

不過要使用weinre，你需要在每個調試的頁面插入一個記不住名字的腳本，并開啟weinre服務，這都屬于重復性勞動。puer通過 -i flag來開啟 weinre的內置集成，每一個經過puer的頁面都會被自動注入腳本。你可以在9001端口找到你的weinre服務，也可以通過puer的初始頁面進入

puer -i
【請戳inspect的演示】

進 階4： 作為中間件來應用與nodejs作為后臺的產品
這個功能其實并不常用了，它將puer作為express/connect服務器的中間件來使用，先貼個代碼范例。

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環境開啟它，而在product環境關閉即可，需要注意的是它必須放在可能輸出html的中間件之前。

一個簡單的puer命令可以帶你在各個開發階段自由飛翔，還不趕緊試一下？

寫在最后
名字含義 ： puer意為普洱，除了愛喝和夠短沒有任何含義，懶得取名罷了。

寫puer的原動力是作者對f5網頁免刷新工具欲求不滿（況且它如此簡單的功能還需要開啟一個桌面gui完全不能忍是么），所以功能抉擇上帶有一些主觀性。如果你試用后，覺得它有價值并有改進余地，可以在issues下留下你的灼見(必須先來一發star)。

碰到問題先puer -h看看有沒有你的答案

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

weinre(推薦): 常用遠程調試工具

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

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

MIHTool:MIHTool是前端工程師在iOS設備上調試和優化頁面的得力助手（原slogan）

sublime-terminal: 快速打開sublime工程或當前文件目錄

f5網頁免刷新工具：基于air的免刷新gui工具，習慣windows的gui工具的童鞋可以試用下。

文章來源： 網易云社區