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
├── .eslintrc.js               // ESLint
├── 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，谢谢你的支撑和孝敬。