WeApp-Workflow：基于Gulp 的“微信小程序”前端开发工做流

WeApp-Workflow 是我在开发我的微信小程序DeveWork+ 过程当中积累总结而来的一个基于Gulp4 的，专门用于开发微信小程序的前端开发工做流。旨在经过自动化的方式解决微信小程序开发过程当中写前端代码的痛点。

简介

进行微信小程序开发，必须用官方的“微信web 开发者工具”，但这个工具的编辑器功能跟专业的编辑器比起来就差强人意了。后来发现能够直接用 编辑器写代码 + “微信web 开发者工具”作预览功能 的组合方式进行开发，嗯开发温馨度好了点。

微信小程序本身搞了一套CSS 的轮子（WXSS）以及HTML 的轮子（WXML），开发中形成了种种不舒服的状况：不支持Sass/Less 这类预处理器；自定义了套rpx的单位，若是按照官方推荐的iPhone6 标准设计稿写代码，写的时候还要本身运算一遍（好比说14px，要写28rpx，我数学很差咋的）；WXSS 跟WXML 中不支持相对路径的静态资源引用，只能是https协议开头的绝对路径。

以上痛点，在使用WeApp-Workflow 后都不是痛点啦！

项目主页

Github 项目主页地址：https://github.com/Jeff2Ma/WeApp-Workflow （欢迎Star 一个~）

功能说明

SCSS 实时编译为 WXSS

使用Sass 预处理器，让写CSS 更加顺畅。.scss文件会实时编译为微信小程序支持的.wxss文件。

WXSS(CSS) 中px 单位转小程序单位rpx

以官方推荐的iPhone 6 为标准设计格式，开发中直接写px 便可自动转换为rpx。

图片压缩

实时压缩图片并采用增量方式防止被重复压缩。

自动上传图片到CDN 并更新路径为https 绝对路径

小程序不支持相对路径的图片引用，仅支持带https 的绝对路径。本工做流能够WXML 以及WXSS 文件中引用的相对路径图片上传到云存储CDN 或经过FTP/SFTP 协议上传到我的服务器空间。目前支持腾讯云，七牛云。

Font 文件转为base64 编码

小程序不支持相对路径的字体文件，本功能能够将CSS 中引用到的Font 文件转码为base64 并替换原路径。

全自动构建雪碧图及生成相应CSS

本功能由postcss-lazysprite 插件驱动。开发中准备好图片后仅仅写一句相似@lazysprite "xxxx"的代码，便可全自动构建雪碧图及生成相应CSS。

亮点

Gulp4

采用最新的Gulp 4版本的新特征，让工做流运行更快。

简洁不简单

核心只有一个默认任务，经过合理的任务搭配机制减小繁琐流程及来回运行终端，让开发更便捷。

增量更新机制，运行起来更快

引入Sass 的增量编译以及图片相关任务的增量更新机制，让工做流运行速度更快。

使用姿式

使用方式在本文这里就不详细说明了，请前往项目主页的README 进行了解。

正常开启后是这样的：

还有这样：

使用WeApp-Workflow 配合作小程序开发，直接使用第三方编辑器（WebStorm、Sublime Text 等）编辑src目录下的文件，保存修改后gulp 进程会实时编译到dist目录相应的位置。而微信web 开发者工具会自动编译刷新，此时仅充当预览功能。嗯，若是你的开发外设（硬件设备）是双屏的，绝对是锦上添花。

因此，开发过程当中的姿式至少应该是这样（图片木有显示终端，但实际上是运行着的）：

感想

Jeff 在两年前曾经弄过一个Gulp 的工做流JGulp，那时候还写了一篇文章，现在JGulp 早已再也不维护，然时至今日还不时有人在这个Repo 上点star。岁月不饶人啊，折腾这折腾那一晃就两年了。

再次说明下，WeApp-Workflow 适合于“小”的小程序开发，若是你的小程序是很复杂的，本工做流可就不必定合适了。另外本文的涉及到WeApp-Workflow 使用的内容以Github 上的README 为准。

最后，再次喊一声，欢迎前往主页地址：https://github.com/Jeff2Ma/WeApp-Workflow 点个star！

原文地址 https://devework.com/weapp-wo... 转载请注明来源