WeApp-Workflow: 基于Gulp 的微信小程序前端开发工作流

WeApp-Workflow 是Jeff 在开发个人微信小程序“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。

亮点

1.Gulp4

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

2.简洁不简单

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

3.增量更新机制,运行起来更快

引入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!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

微信小程序发话:玩一个小游戏才是正经事

“第一张微信身份证”“如果问了也是白问,不如微信搜一搜”“第一流量入口开放”等等话题,占据了各大媒体平台。这些被写烂的热度,小渔儿在此就不多费口舌,不如坐下来,...

32950
来自专栏守望轩

微信小程序web-view的简单思考和实践

微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个...

46490
来自专栏企鹅号快讯

火爆刷屏的“跳一跳”,能拯救小程序创业者吗?

元旦假期这几天,很多人都被一款跳来跳去的小游戏刷屏了。这是微信小程序年底推出的一个大招:“小游戏”。短短一两天时间,这款小游戏就已经凭借着简单的玩法和好友PK排...

22590
来自专栏企鹅号快讯

小程序飞一般的前进,你还在懵吗?

出处:库博 作者:曦 临近年末,对于新媒体小编来说,简直是一场“年终盘点”的盛大狂欢。 2017我们总共吃了多少大瓜? 2017有哪些潮流热点被你漏掉了? ……...

24470
来自专栏企鹅号快讯

为什么3.9亿人对微信小游戏“跳一跳”这么上瘾?

元旦假期,小编也一直沉迷于这款小游戏,还挺好玩的。一起来看看本文作者对此的个人见解吧~ ? 请点击此处输入图片描述 如下图所示,2017年12月28日起,微信小...

29690
来自专栏企鹅号快讯

什么是小程序?微信小程序为什么这么火热?

根据小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装...

25570
来自专栏企鹅号快讯

微信小程序新增多项功能,别又错过一个亿

微信小程序作为轻型应用很有可能会是未来移动互联网应用的主要形式,它的特点是小而快,但我们认为它不会替代所有的App,因为微信小程序目的主要还是解决小应用的问题,...

27470
来自专栏企鹅号快讯

一次不成功的深度学习实践-微信跳一跳

最近微信的跳一跳小程序火了一把,所以前天也更新了微信玩了几盘,最多手动到200左右就不行了。 ? 后来准备用代码写个辅助工具,上Github一查,已经有人做出来...

25750
来自专栏企鹅号快讯

商家如何才能利用好小程序?

微信是互联网用户使用得最多的应用软件,微信坐拥近10亿的用户流量,很多商家都会想尽办法利用微信进行推广销售。最近微信推出的小程序火爆了整个互联网,虽然很多商家都...

23360
来自专栏企鹅号快讯

微信小程序终于可以玩直播了,大批流量来袭

你们期待的直播小程序来了,主播们、网红们福利到了,新一批网红即将诞生,大批流量在向你们招手! ? 从今天起,不再只是蘑菇街可以直播 从今天起,可以用小程序在线授...

27770

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励