介绍一款超级好用的小工具--puer

  • puer 是一个可以实时编辑刷新的前端服务器。 它的特性有:
  1. 提供一个当前或指定路径的静态服务器
  2. 浏览器的实时刷新:编辑css实时更新(update)页面样式,其它文件则重载(reload)页面
  3. 提供简单熟悉的mock请求的配置功能,并且配置也是自动更新。
  4. 可用作代理服务器,调试开发既有服务器的页面,可与mock功能配合使用
  5. 集成了weinre,并提供二维码地址,方便移动端的调试
  6. 可以作为connect中间件使用(前提是后端为nodejs,否则请使用代理模式)
  • 作者暂时只使用了前两点,以后用到更复杂的需求,接着补充。。。

安装

  • 使用npm全局安装 puer命令
  npm install puer -g
  • 输入puer -h可以查看Help

使用

  • 进入项目目录下,进入 cmd 环境,输入 puer ,浏览器会自动打开 http://localhost:8000/(端口可以-p 8001参数进行控制),编辑当前路径下的文件,会实时更新页面(无论你在多少台电脑打开多少个页面)。 效果如下:
cmd 命令行
浏览器效果
  • 我们看到这个文件夹下有两个 .html 文件,修改哪个文件,点击相应的按钮,浏览器会跳转到相应的页面,比如 index.html 页面
image.png
  • 之后我们只要修改 index.html 文件,一保存浏览器就会刷新,实时看到效果
    image.png

推荐阅读

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,505评论 1 32
  • 2018年3月14日 晴 星期三 春日甚好,嘴角应该上扬。 ...
    洛阳麻麻阅读 277评论 0 0
  • 〈2〉 黑衣公子转身的一瞬,老板终于想起这个背影。 他应当是城北龙虎镖局的少镖头,名字可能是复姓东方单名一个望。据...
    古卷青锋阅读 207评论 1 4
  • 读懂他人、读懂红尘,这就是一个妄念,读懂自己更是一种执著。 我们感觉自己读懂了什么,我们或欣喜若狂或郁闷难解。诛不...
    王子申阅读 322评论 0 0
  • 吐槽大会第二期的第一个嘉宾,邀请了伊能静。出场方式很特别,伊能静在大家齐喊“公主”声中走出来。 今年48岁的她依然...
    优雅的猫a阅读 807评论 4 2