微信小程序开发中基于 Gulp 构建的工作流程解析

目前开发微信小程序时，可选的技术方案大概有四种，分别是：微信小程序原生开发，使用wepy框架，使用mpvue框架，使用taro框架

将持续更新，感谢你的支持。

基于Gulp构建的微信小程序开发工作流

适用场景

三种开发方案，各有优劣。使用第三方框架开发，可以享受框架带来的开发便利，但对于小程序新增的诸多特性和功能，比如WXS模块、自定义组件和插件等，受制于第三方框架，无法使用。

而原生小程序的开发模式，又过于简陋，就样式来说，写惯了less，stylus和sass的同学一定无法忍受wxss的这种写法，基于此，决定使用gulp自动化工具来构建一套微信小程序开发的基础模板，在完全保留微信小程序功能和特性的基础上，又可以的使用less来写样式，同时加入图片压缩，命令行快速创建模板等特性，如此开发，快哉，快哉！

github走起

特性

• 基于gulp+less构建的微信小程序工程项目

• 项目图片自动压缩

• ESLint代码检查

• 使用命令行快速创建page、template和component

Getting Started

0. 开始之前，请确保已经安装node和npm，全局安装gulp-cli

1. -代码

2. 进目录，安装依赖

3. 编译代码，生成dist目录，使用开发者工具打开dist目录

4. 新建page、template或者component

5. 上传代码前编译

6. 上传代码，审核，发版

工程结构

Gulp说明

Q&A

Q: 为什么工作流中没有加入js转换，样式补全以及代码压缩？
A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能，在此工作流中不做额外添加。

Q: _template目录的文件有什么用？
A: 使用gulp auto命令自动生成文件，-s参数可以指定copy的对象，默认情况下是以对应目录下文件夹为_template中的文件为copy对象的。开发者可以根据业务需求，自定义_template下的文件。

Q: _template目录的文件是否会被编译到dist目录？
A: 不会。

TODO

• [x] 代码注释

• [x] 规范命令行使用

• [x] eslint

• [ ] 引入常用的CSS库，比如weui之类的

以上就是微信小程序开发中基于 Gulp 构建的工作流程解析的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。