超簡單工具puer——「低碳」的先後端分離開發

本文由做者鄭海波受權網易雲社區發佈。

前幾天，跟一同事(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工具的童鞋能夠試用下。

文章來源： 網易雲社區