generator-sync v1.2.0
prome-sync
移动端混合式开发利器,定向监听页面自动同步编辑刷新
开始之前
前端技术发展飞快,移动设备硬件性能飞跃式提高,导致了移动端混合开发真正成为了可能,那就是利用html的特性作为跨平台技术解决方案.
技术的推动,社区的发展,萌发了许多优秀的框架,如:react-native等,然而混合式的开发都离不开一样东西,那就是webview.
混合式开发中,使用多个webview浏览器容器作为载体,共同构成了app应用的视觉呈现.
那么问题来了,在开发过程中,往往在静态页面中调试好的页面(这方面的工具很多也很成熟),需要打包到安装包中并安装到设备上进行真机测试, 才能够完成数据对接以及业务流程和交互操作方面的工作,这时候开发就进入了无限修改打包模式(原生开发其实也是一个不断build的过程,因此每次要调试的时候都是需要编译的).
接触了混合式开发的跨平台解决方案已经接近两年多了,趟过无数坑之后,终于在最近想到了一套比较满意的开发工作流.
prome-sync是什么?
prome-sync是适合任何基于webview进行混合式开发的开发工作流,主要为了解决混合式开发中调试效率低下的痛点.
prome-sync能做什么?
提供web服务器
脚手架初始化项目文件结构
自动编译SASS
自动补全CSS3浏览器前缀
定向监听指定页面, 匹配文件的变化并自动刷新该浏览器(webview)
prome-sync怎么使用?
安装开发环境
1.Node 环境 : 选择合适自己的方式进行安装(小草同学用的是v4.2.4)
Mac -- brew install -v4.2.4 node (建议使用 Brew 安装)
2.Yeoman 环境：npm install -g yo
3.Gulp 环境：npm install -g gulp
4.Nginx 环境：
解压之后为了方便使用,可以配置到系统全局的Path变量中,配置后可以直接在命令行使用相关命令
a.复制解压之后的文件目录路径,如:(C:\Users\PromeYang\Downloads\nginx-1.8.0)
b.我的电脑 -> 属性 -> 高级 -> 环境变量，编辑<系统变量> - Path
c.在变量值输入框的最后面<输入> `;` ,然后<粘贴>步骤1复制的路径,一直按<确定>保存修改
配置完成后,可以同时按下 win+r ,输入 cmd 启动命令行工具, 现在已经可以直接使用以下常用命令$ cd <下载安装包的文件目录路径>
$ tar xvzf nginx-1.8.0.tar.gz
$ cd nginx-1.8.0
$ sudo ./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-cc-opt="-Wno-deprecated-declarations"
$ sudo make
$ sudo make install
编译完成后,添加到环境变量中
$ vim ~/.bashrc
export PATH="/usr/local/nginx/sbin:$PATH"
保存修改之后,让以上配置生效
$ source ~/.bash_profile- 配置成功后, 启动命令行工具, 现在已经可以直接使用以下常用命令
nginx -v -- 查看Nginx版本,确定是否配置成功
nginx -c <配置文件路径> -- 用于启动指定配置文件的nginx服务(win系统不能使用默认的方式,会报找不到相关路径的报错)
nginx -s stop -- 不保存相关信息直接停止nginx服务
nginx -s quit -- 保存相关信息,完整有序的停止nginx服务
nginx -s reload -- 当配置信息修改，需要重新载入这些配置时使用此命令。注意 : Mac本如果编译报错找不到 PCRE, 请到官网下载安装
5.获取脚手架
npm install -g generator-sync如果是直接从 github 上克隆的, 进入克隆目录
$ cd generator-sync
$ npm link脚手架初始化项目
在空目录执行
yo sync初始化项目项目初始化之后的文件结构 -- h5模板
yourProj/
│
├── package.json // 项目依赖定义
├── gulp.js // gulp配置任务入口
├── prome-sync // 启动服务脚本
├── tasks/ // gulp任务流，开发等
├── conf/ // nginx配置
│
├── node_modules // `npm install` 拉取依赖包
│
└── src/ // 开发目录
├── css/
├── sass/
├── img/
├── js/
└── index.html
- 项目初始化之后的文件结构 -- APICloud模板
yourProj/
│
├── package.json // 项目依赖定义
├── gulp.js // gulp配置任务入口
├── prome-sync // 启动服务脚本
├── tasks/ // gulp任务流，开发等
├── conf/ // nginx配置
│
├── node_modules // `npm install` 拉取依赖包
│
└── src/ // 开发目录
├── css/
├── feature/
├── html/
├── icon/
├── image/
├── launch/
├── res/
├── sass/
├── script/
├── wgt/
└── index.html开始使用
如果是初始化项目, 在执行完
yo sync命令之后, 会弹出一个新的命令行终端如果是再次启动项目, 在命令行终端进入到当前项目的目录, 执行
gulp命令, 弹出终端在终端输入以下命令, 根据指示完成操作
$ ./prome-sync
>> 请输入IP地址:
>> 127.0.0.1(手动输入当前IP)
>> 请输入查看端口号:(默认3377)
>> 3377(直接回车默认3377端口)
>> 启动nginx需要权限:
>> ******
>> 所有服务成功开启,现在可以 coding...访问
webserver进行开发, 如 :127.0.0.1:3377需要定向监听页面时, 访问的路径加上参数
mod=dev如 :127.0.0.1:3377/index.html?mod=dev, 可同时监听多个页面
案例展示
更新日志
- 1.0.0 -- 初始化版本
- 1.1.0 -- 同时开启多个监听服务, 精心编写的执行脚本, 最精简的命令
License
Released under MIT LICENSE