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 安装界面
近期更新:
啓動時檢測本地文件是否存在
退出時停止所有開發進程
檢查版本更新
修改工作路徑移除邏輯修改(所有修改的工作區路徑均可在回收站找到)
加入統計代碼
增加編輯菜單