微信小程序开发：在Gulp的基础上构建的工作流程

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

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

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

github走起特性基于gulp+less构建的微信小程序工程项目

项目图片自动压缩

ESLint代码检查

使用命令行快速创建page、template和componentGetting Started0. 开始之前，请确保已经安装node和npm，全局安装gulp-cli$ npm install --global gulp-cli1. 下载代码$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git2. 进目录，安装依赖$ cd wx-miniprogram-boilerplate && npm install3. 编译代码，生成dist目录，使用开发者工具打开dist目录$ npm run dev4. 新建page、template或者componentgulp auto -p mypage创建名为mypage的page文件gulp auto -t mytpl创建名为mytpl的template文件gulp auto -c mycomponent创建名为mycomponent的component文件gulp auto -s index -p mypage复制pages/index中的文件创建名称为mypage的页面5. 上传代码前编译$ npm run build6. 上传代码，审核，发版工程结构wx-miniprogram-boilerplate├── dist// 编译后目录├── node_modules // 项目依赖├── src │├── components // 微信小程序自定义组件│├── images// 页面中的图片和icon│├── pages// 小程序page文件│├── styles// ui框架，公共样式│├── template// 模板│├── utils// 公共js文件│├── app.js│├── app.json│├── app.less│├── project.config.json // 项目配置文件│└── api.config.js// 项目api接口配置├── .gitignore├── .eslintrc.js// ESLint├── package-lock.json├── package.json└── README.mdGulp说明Tasks:dev开发编译，同时监听文件变化build整体编译clean清空产出目录wxml编译wxml文件（仅仅copy）js编译js文件，同时进行ESLint语法检查json编译json文件（仅仅copy）wxss编译less文件为wxssimg编译压缩图片文件watch监听开发文件变化auto自动根据模板创建page,template或者component(小程序自定义组件)gulp auto 选项：-s, --srccopy的模板[字符串] [默认值: "_template"]-p, --page生成的page名称[字符串]-t, --template生成的template名称[字符串]-c, --component生成的component名称[字符串]--msg显示帮助信息[布尔]示例：gulp auto -p mypage创建名为mypage的page文件gulp auto -t mytpl创建名为mytpl的template文件gulp auto -c mycomponent创建名为mycomponent的component文件gulp auto -s index -p mypage复制pages/index中的文件创建名称为mypage的页面Q&AQ: 为什么工作流中没有加入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的基础上构建的工作流程的详细内容，更多请关注小潘博客其它相关文章！