jdf build

简介

jdf build | jdf b命令主要用于编译jdf项目并开启本地server来调试项目。

特点

  • 自动刷新
    保存文件自动编译并刷新浏览器，无需安装任何插件；
  • 多终端同步
    多终端同步响应鼠标键盘动作，实时查看多终端对同一操作的效果；
  • 导航
    浏览器中显示项目文件夹列表，访问目标页面无需在浏览器输出访问路径；

  • 移动端调试
    jdf集成weinre工具，通过weinre，可以调试移动设备中页面；

    命令参数

  • --open 或 -o，在开启本地服务的同时，自动在浏览器中打开根目录文件列表页面

  • --help 或 -h，查看jdf b帮助

控制台信息

编译成功后，控制台中会打印如下信息：

  1. [JDFX] Access URLs:
  2.  --------------------------------------
  3.        Local: http://localhost:80
  4.     External: http://192.168.191.1:80
  5.  --------------------------------------
  6.           UI: http://localhost:3001
  7.  UI External: http://192.168.191.1:3001
  8.  --------------------------------------
  • Local，本地服务器地址
  • External，同网段内其他机器访问地址，用于移动端访问
  • UI，jdf服务器控制面板地址，从这个入口可开启weinre，模拟网络限流等功能
  • UI External，同网段内访问服务器控制面板地址

使用方法

PC端

  • 用jdf init xxx创建jdf工程后，在控制台输入jdf b -o后保留这个控制台运行，方便实时调试；
  • 在自动打开的浏览器页面中点击导航到开发页面，编辑widget等文件，查看浏览器的同步改动；
  • 引用mock来模拟数据生成和读取，建议mock。
  • 去除mock引用，切换hosts，模拟线上环境。

M端

  • 将移动设备与开发电脑连接到同一网段内；
  • 在控制台输入jdf b -o，保留这个控制台；
  • 用移动设备扫描浏览器弹出页面上的二维码或者在移动设备浏览器上输入External的网址；
  • 在电脑或手机上导航到开发页面，编辑widget等文件，查看移动设备和开发电脑上浏览器的页面改动；

M端调试

  • 在jdf b -o运行时，可以通过修改本地文件实时查看M端页面改动；
  • 如果需要微调，则可以使用集成的weinre，如何使用请参见weinre说明；

常见问题

  • 终端报acron.js错误
    • 请检查js有无写错
    • html中的模板由<script type="text/tempalte">写成了<script type="text/javascript">
  • 在改动文件后，没有刷新浏览器
    • 检查scss是否写错，查看终端提示信息

碰到上述问题可以尝试jdf b -v打印更详细的信息。