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

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

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

簡而言之，puer是乙個可以實時編輯重新整理的前端伺服器。特性一覽:

可以發現這裡功能並不多，但羅列的基本都是實際前端開發中會涉及到的。可能敏銳的朋友會點出，同類的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資料

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

層級2: 通過fiddler等除錯**工具mock資料

優點是到正式環境的切換成本小，但配置成本較大，也介面mock也有侷限性並基本上只能是靜態資料模擬。

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

puer提供了叫外掛程式(addon)的功能，整合了express的route.js來達到最簡的路由配置，可以提供基於真實http請求與相應的動態的mock資料。

puer -a route.js

route.js 這麼寫

}%它其實就是一段nodejs程式，輸出是一配置物件，key的空格前代表的是請求method，後半部分是請求路徑，而value代表**函式和express的路由中介軟體是一致的，傳入的request和response物件，相較於原生的提供了一些額外方法，不了解的也可以戳這裡

【戳這裡看演示gif】

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

開發進行到一定階段，一般後端服務就逐步進入了，靜態頁面的開發不再適用。到這個時候，我們可以使用--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的演示】weinre是目前最常用的遠端除錯工具，它雖然幾乎無法除錯js，但是由於和平台、瀏覽器無關的特性，使得這個低效的工具一直流行至今，也有很多任務具整合了它，比如我之前提到的mihtool。

不過要使用weinre，你需要在每個除錯的頁面插入乙個記不住名字的指令碼，並開啟weinre服務，這都屬於重複性勞動。puer通過-iflag來開啟 weinre的內建整合，每乙個經過puer的頁面都會被自動注入指令碼。你可以在9001埠找到你的weinre服務，也可以通過puer的初始頁面進入

puer -i

【請戳inspect的演示】這個功能其實並不常用了，它將puer作為express/connect伺服器的中介軟體來使用，先貼個**範例。

dir: "path/to/watch/folder",

ignored: /(\/|^)\..*|node_modules/ //ignored file}

server.listen(8001, function())

一般你在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工具的童鞋可以試用下。

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

Node之簡單的前後端互動例項講解

超簡單好用的螢幕錄影工具

前後端聯調的一般步驟和Nginx簡單配置

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

Node之簡單的前後端互動 例項講解

超簡單好用的螢幕錄影工具

前後端聯調的一般步驟和Nginx簡單配置

相關推薦

Node之簡單的前後端互動例項講解