WeFlow是由腾讯开发的一款免费的web前端开发工具,软件基于 tmt-workflow 工作流,代码开源可定制,具有高效、强大、跨平台的特点,支持微信游戏,朋友圈广告,微信城市服务,微信摇电视。需要的朋友可以下载!
WeFlow软件特点
1.傻瓜式网页设计制作平台是一个帮助不会设计网站的用户无需代码即可完成网页ui设计的网站,让你网页设计无压力;为了让用户在不需要懂编程的前提下,让建造一个网站变得非常容易上手。
2.Webflow试图帮助那些毫无编程概念的设计师将自己的创意发挥出来,已经有将近10000用户的它最大的特点就是和Froont相似的在线响应式网页设计平台,它能够根据浏览网页设备的不同自动对网页进行大小调整和排版,并且兼容的设备平台包括了 PC,平板和智能手机。最后用户在完成从设计到CSS构架之后,甚至可以在线直接将建好的网页发布,而不需要导出代码到其他发布工具上。
3.Webflow对于市场的定位一开始就不在于中小企业,而是那些为客户制作网页的设计师。这和很多在线网页编辑公司的思路大相径庭。
软件功能
自动化流程
1.Less / Sass -> CSS 编译
2.CSS Autoprefixer 前缀自动补全
3.自动生成图片CSS属性,width & height 等
4.CSS cssnano 压缩
5.CSS Sprite 雪碧图合成
6.Retina @2x & @3x 自动生成适配
7.Imagemin 图片压缩
8.JS 合并压缩
9.EJS 模版语言
调试和部署
1.监听文件变动,自动刷新浏览器 (LiveReload)
2.S/FTP 发布部署
3.Zip 项目打包
解决方案集成
1.px -> rem 兼容适配方案
2.智能 WebP 解决方案
3.去缓存文件 Reversion (MD5) 解决方案
使用说明
1.绿色版本无需安装,用鼠标双击“WeFlow.exe”打开即可
2.进入WeFlow软件界面后,点击新建项目,输入项目名字
3.点击“开发”后软件就会自动开始监听。在点击“参数编译”即可编译完成
WeFlow使用教程
1. 项目、流程、环境依赖三方分离,通过插件实现可扩展性
本着高效、可维护、易于交接的出发点,工作流将项目和流程分离,所有项目共用一份工作流任务 和 node_modules 依赖,通过插件的逻辑进行功能差异特效定制,如图:
2. 标准化的项目开发、编译目录
根据在实际项目经验(如:微信游戏,朋友圈广告等),积累沉淀而得出的标准项目结构,不仅统一了组内的项目风格,也使得对外交接变得一致,有章可循。
3. 精简易扩展的配置方式
采用 JSON 文件进行功能配置和插件扩展,灵活方便,可以进行如下扩展定制:
任务的动态加载机制(高级)
自定义任务(高级)
自定义插件(高级)
附:yoeman 命令行使用录屏
总结:
tmt-workflow 我们内部一直在使用,配合 WebStorm 的 Task Manager 使用也是非常的舒服,所以习惯命令行操作的朋友我们很推荐直接用 Gulp 的版本,如图:
这套命令行的工作流非常好用,但是。。。
安装它的过程也非常的蛋疼,你可能会遭遇:
npm install 常常撞墙,换用 cnpm install 会好点
node_modules 依赖尺寸很大,要下载 100+ MB 以上零碎文件
Window 下的编译会遇到各种奇葩的环境变量的问题,解决起来很繁琐
命令行操作不直观、体验不够优化,而且有学习门槛
这种种的问题给我们对外部团队的推广造成了阻碍,于是,一个免依赖、即开即用、体验完善的 GUI 工具成为终极方案。
同时由于 Electron 技术的的兴起的逐步完善,我们也优先选择了 Electron 作为跨平台的技术方案。
更新日志
本期更新:
修复快速新建项目问题
优化任务执行交互
更换统计代码
全新的 macOS 安装界面
近期更新:
启动时检测本地文件是否存在
退出时停止所有开发进程
检查版本更新
修改工作路径移除逻辑修改(所有修改的工作区路径均可在回收站找到)
加入统计代码
增加编辑菜单