首頁 >微信小程式 >小程式開發 >微信小程式開發：在Gulp的基礎上建構的工作流程

微信小程式開發：在Gulp的基礎上建構的工作流程

php是最好的语言原創: 2018-07-25 11:49:052026瀏覽

目前開發微信小程式時，可選的技術方案大概有四種，分別是：微信小程式原生開發，使用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

$ 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程式碼壓縮等功能，在此工作流程中不做額外新增。
微信小程式開發：在Gulp的基礎上建構的工作流程

Q: _template目錄的檔案有什麼用？
A: 使用gulp auto指令自動產生文件，-s參數可以指定copy的對象，預設是以對應目錄下資料夾為_template中的檔案為copy物件的。開發者可以根據業務需求，自訂_template下的檔案。

Q: _template目錄的檔案是否會被編譯到dist目錄？
A: 不會。

TODO

[x] 程式碼註解
[x] 規範命令列使用
[x] eslint
[ ] 引入常用的CSS庫，例如weui之類的