随着充电桩的运营平台越来越多(市场部的伙伴们越来越给力),前端小程序的版本管理也变得越来越复杂、越来越困难。但一键联的程序员们不甘心于此,所以,e-pack 诞生了。
e-pack 的设计思想是:不同运营平台的前端代码不再使用分支去管理版本的定制与升级,而是在后期通过按配置打包来生成不同平台的定制版本。
在 e-pack 的观念里, 分支已不存在,冲突也不再有。开发与运维从此远离了繁琐的分支工作!
1、Window系统
2、Java运行环境
新建环境变量 E_PACK_HOME 指向上一步的解压目录
编辑 Path 变量,添加 %E_PACK_HOME%\bin
至此2步,e-pack 安装完毕!
打包指定平台 :
命令执行完,就在当前目录(build目录)生成这有电的定制代码啦:
一键打包所有平台:
这样,所有平台的代码就都一键生成了(配置目录只配置了三个平台,所有这里只生成了三个平台的代码)
只需要把 build 目录下 e-pack.properties 文件中的 inputPath 指向支付宝小程序的源码路径即可
考虑到前端与运维往往没有预先安装Java运行环境,因此,此次对 e-pack 进行了升级:e-pack-x,使其在没有 Java 运行环境的电脑上也可以正常工作。
此次 e-pack 相比上一版本也做了升级,具体如下:
当然,e-pack-x 同样拥有上述功能。 e-pack-x 的安装步骤 同 e-pack,只不过解压后的目录结构里多了一项:
e-pack-x 的命令使用方法同 e-pack
上节我们谈过了 e-pack 的安装和使用,接下来我们聊聊 e-pack 是如何处理打包以及前端人员应该如何去开发模板代码。
在模板代码里,一切与平台相关的信息,都应抽象出来,提取到平台配置里!
例如,微信小程序代码里的 project.config.json 的 appid
,app.json 的 window.navigationBarTitleText
信息:
使用 e-pack 的模板语法,它们应被修改如下:
然后在 这有电 的打包配置文件里应加入:
这样打包后,由可以得到这有电的目标代码啦!
上述演示的是 #( ) 指令的使用,那接下来再看看 e-pack 支持的指令集吧:
OK,以上就是 e-pack 所支持的所有指令了,在模板代码的编写与打包中,它们将发挥巨大作用。
考虑到O单时,有些客户会要求重新定义主题色。而主题色的改动,往往随之变动的便是几十种颜色,而这些颜色又需要相互搭配协调,所以又需要美术工程师重新设计,从而耗费工时 。
为解决这个问题,e-pack 深入研究色彩理论,得出一套可以不用重新设计便可一键随意变更主题的方案:色值运算!
接下来让我们看看 e-pack 在色值运算上新增的功能吧:
看完是不是一脸懵,没事,我们接下来看看何为 “色相”,先来个色盘吧:
上图这个色盘极坐标系里,红色位于0度,绿色位于120度,蓝色位于240度,在这个色盘极坐标系里,颜色所处的角度即为 “色相”
所以红色的色相旋转120度就得到绿色,绿色旋转120度就得到蓝色,而旋转180度后得到的颜色称为原色的互补色。
现在明白了色相,那饱和度和明度呢?不急,再来个色块:
是不是一图胜千言,什么都明白了呢
OK,了解了色彩的一些理论后,我们在看看 e-pack 是如何运用它们的吧:
又是一图胜千言。
考虑到在小程序的模板开发过程中,往往需要打开微信开发者工具 或 支付宝开发者工具 来预览效果。而每次 e-pack 全量打包过后,微信和支付宝的开发工具都要对所有打包的代码进行比较长时间的编译,造成模板的开发不够流畅,从而导致开发效率降低。
为此,e-pack 1.2 推出 增量打包 功能,只对修改过的代码打包,大大缩短模板的 打包时间 和 微信支付宝开发工具的编译时间!
为了让 模板的开发与打包更加顺滑,以下是 e-pack 与 代码编辑器 VSCode 的整合教程,使得在开发过程中无需再打开命令行手动执行打包命令:
添加 VSCode 编译任务:在 vscode 的工作目录下添加 .vscode 文件夹,新新建 tasks.json 文件,然后输入以下内容:
然后OK了吗?
OK 了!
编辑完模板代码保存后,如果想预览打包效果,直接 Ctrl + Shift + B 然后接着 Enter,就自动增量打包啦!
当然,这个快捷键也是完全可以自定义的。如图:
是不是已经跃跃欲试了,赶快下载附件体检吧!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。