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

wx-miniprogram-boilerplate

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

适用场景

目前开发微信小程序时，可选的技术方案大概有四种，分别是：

1. 微信小程序原生开发
2. 使用wepy框架
3. 使用mpvue框架
4. 使用taro框架

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

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

github走起

特性

• 基于gulp+less构建的微信小程序工程项目
• 项目图片自动压缩
• ESLint代码检查
• 使用命令行快速建立page、template和component

Getting Started

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

$ npm install --global gulp-cli
复制代码

1. 下载代码

$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
复制代码

2. 进目录，安装依赖

$ cd wx-miniprogram-boilerplate && npm install
复制代码

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

$ npm run dev
复制代码

4. 新建page、template或者component

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的页面
复制代码

5. 上传代码前编译

$ npm run build
复制代码

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

工程结构

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
├── package-lock.json
├── package.json
└── README.md

复制代码

Gulp说明

Tasks:
  dev              开发编译，同时监听文件变化
  build            总体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  
  auto             自动根据模板建立page,template或者component(小程序自定义组件)

gulp auto 

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_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&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之类的

最后

将持续更新，若是有新的建议，欢迎建立Issue或发送PR，感谢你的支持和贡献。