puer实现先后端分离开发

简介

简而言之，Puer是一个能够实时编辑刷新的前端服务器。特性一览:

• 提供一个当前或指定路径的静态服务器
• 全部浏览器的实时刷新：编辑css实时更新(update)页面样式，其它文件则重载(reload)页面
• 提供简单熟悉的mock请求的配置功能，而且配置也是自动更新。
• 可用做代理服务器，调试开发既有服务器的页面，可与mock功能配合使用
• 集成了weinre，并提供二维码地址，方便移动端的调试
• 能够做为connect中间件使用(前提是后端为nodejs，不然请使用代理模式)

能够发现这里功能并很少，但罗列的基本都是实际前端开发中会涉及到的。可能敏锐的朋友会点出，同类的browser-sync提供了更强的操做同步的功能。这点其实主要不想去盲目攀比功能(实现其实并不难，由于基础的注入脚本已经作了，剩下的都只是功能堆砌)，目前的出发点都是做者实际的需求(好吧，实际上是懒)。还有就是，其实puer诞生比它要早一年多。

让咱们开始使用吧

安装

确保你安装了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以及当前的地址二维码，方便手机访问。

编辑当前路径下的文件，会实时更新页面(不管你在多少台电脑打开多少个页面)。

关于如何命令行下快速到达工做目录，做者推荐两个工具

1. z: 必装shell工具，快速进入最经常使用目录
2. 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 request
module.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看看有没有你的答案

资源汇总

1. puer（推荐）: “低碳”的前端服务器工具
2. weinre(推荐): 经常使用远程调试工具
3. z(推荐): Shell工具，快速跳转到最经常使用的目录。
4. browser-sync: 包含puer的部分功能，同时提供多页面的操做同步(跳转、表单)
5. MIHTool:MIHTool是前端工程师在iOS设备上调试和优化页面的得力助手（原slogan）
6. sublime-terminal: 快速打开sublime工程或当前文件目录
7. f5网页免刷新工具：基于air的免刷新gui工具，习惯windows的gui工具的童鞋能够试用下。

博文转自【 前端乱炖】感谢做者拴萝卜的棍子