在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):Jeff2Ma/WeApp-Workflow开源软件地址(OpenSource Url):https://github.com/Jeff2Ma/WeApp-Workflow开源编程语言(OpenSource Language):JavaScript 38.4%开源软件介绍(OpenSource Introduction):
介绍WeApp-Workflow 是一个专门为开发微信小程序打造的前端开发工作流,基于Gulp 4 开发,旨在通过工作流的方式解决微信小程序开发过程中写前端代码的痛点。 项目主页:https://github.com/Jeff2Ma/WeApp-Workflow 文章介绍:https://devework.com/weapp-workflow.html 功能SCSS 实时编译为 WXSS使用Sass 预处理器,让写CSS 更加顺畅。 WXSS(CSS) 中px 单位转小程序单位rpx以官方推荐的iPhone 6 为标准设计格式,开发中直接写 // Input: src/pages/index/index.scss
.index__header {
font-size: 14px;
margin-top: 20PX; /* 如果为大写的`PX`单位则不会转换 */
}
// Output: dist/pages/index/index.wxss
.index__header {
font-size: 28rpx;
margin-top: 20PX; /* 如果为大写的`PX`单位则不会转换 */
} 图片压缩实时压缩图片并采用增量方式防止被重复压缩。 自动上传图片到CDN 并更新路径为https 绝对路径小程序不支持相对路径的图片引用,仅支持带 // Input: src/pages/index/index.wxml
<image src="%ASSETS_IMG%/t.png"></image>
// Output: dist/pages/index/index.wxml
<image src="https://cdn.devework.com/weapp/devework/t.png"></image> Font 文件转为base64 编码小程序不支持相对路径的字体文件,本工作流可将CSS 中引用到的Font 文件转码为base64 并替换原路径。
全自动构建雪碧图及生成相应CSS本功能由postcss-lazysprite 插件驱动。开发中准备好图片后仅仅写一句类似 // Input: src/app.scss
@lazysprite "filetype";
// Output: dist/app.wxss
.icon-filetype-doc {
background-image: url(../sprites/filetype.png);
background-position: 0 0;
width: 80px;
height: 80px;
}
.icon-filetype-pdf {
background-image: url(../sprites/filetype.png);
background-position: -90px 0;
width: 80px;
height: 80px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2) {
.icon-filetype-doc {
background-image: url(../sprites/[email protected]);
background-position: 0 0;
background-size: 170px 170px;
}
.icon-filetype-pdf {
background-image: url(../sprites/[email protected]);
background-position: -90px 0;
background-size: 170px 170px;
}
} 亮点Gulp4采用最新的Gulp 4版本的新特征,让工作流运行更快。 简洁不简单核心只有一个默认任务,通过合理的任务搭配机制减少繁琐流程及来回运行终端,让开发更便捷。 增量更新机制,运行起来更快引入Sass 的增量编译以及图片相关任务的增量更新机制,让工作流运行速度更快。 项目结构
开始使用
安装0、请先全局按照 Gulp-cli
1、通过
2、建议删除
3、安装必要模块
4、启动开发 建议复制
其余任务: 配置完成以上操作后,需要在“微信web 开发者工具”也进行相关设置(以 v1.x 为准,不再兼容 v0.x 版)。 1、新建项目,直接选择整个项目目录,即 开发接下来进入常规开发即可。开发过程中,使用第三方编辑器(WebStorm、Sublime Text 等)编辑 开发要点说明:
Q&A
案例展示这些小程序采用 WeApp-Workflow 作为开发工作流(欢迎发PR 添加案例): 鸣谢TODO
意见反馈如果有意见反馈或者功能建议,欢迎创建 Issue 或发送 Pull Request,感谢你的支持和贡献。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论