之前写过三篇博文分别是《sublime text3和chrome双向实时编辑预览CSS》《LiveReload一款解放F5的开发工具》和《善用chrome中的workspace提高前端开发效率》。这三篇博文介绍的工具方法都是从不同角度来提升前端开发工作效率。其中第一和第三篇文章都仅仅针对CSS文件的调试,没有涉及到html文档的修改。第二篇文章介绍的工具方法则和本篇文章类似,但是前提是仅仅针对chrome浏览器并且安装有对应的插件,对于不方便FQ的同学可能不便使用,此篇博文介绍的方法不限制于使用的浏览器,而且不需要FQ安装浏览器插件,对于大部分同学而言更方便。
puer工具的安装:
首先本地必须已经安装了nodejs,如果没下载,请移步nodejs官网,下载左侧那个版本即可(Recommended for most users,建议适合大部分用户)
命令行安装puer(-g全局安装,这样本机任意目录下都可以调用puer工具)
npm install -g puer
puer工具的使用:
cd /path/to/workspace ↵ #命令行里面进入需要操作的目录 puer ↵ #直接键入puer命令,调用puer
以上是默认puer的使用方法,当然对于命令行命令一定是有其他命令参数的(-h):(通过命令及参数puer -h可以查询其他参数)
Usage:puer [options...] #用法:puer [参数...] Options: #参数选项: -p,--port server's listen port, 8000 default #前端服务器端口设置,默认8000 -f,--filetype fileType to watch(split with '|'), defualt 'js|css|html|xhtml' #监测的文件类型,默认的是js,css,html,xhtml文件 -d,--dir your customer working dir. default current dir #监测目录,默认是当前目录 -i,--inspect start weinre server and debug all puer page #启动weinre服务,供于调试 -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 # 帮助命令清单
从以上的命令行参数发现,puer相当于一个前端的服务器,每当我们保存了调试修改的页面之后,他都会自动的刷新浏览器,以展现页面最新的内容。如果是使用sublime的同学,还建议搭配插件terminal,这样工作起来就非常的顺心。他会启动你的默认浏览器展现页面,旁边还有二维码方便你使用手机设备查看。puer官网:https://github.com/leeluolee/puer
中文详细文档:https://leeluolee.github.io/2014/10/24/use-puer-helpus-developer-frontend/