基於Gulp構建的微信小程式開發工作流

Runner羊發表於2018-07-10
微信小程式

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程式碼壓縮等功能，在此工作流中不做額外新增。

image

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

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

TODO

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

最後

將持續更新，如果有新的建議，歡迎建立Issue或傳送PR，感謝你的支援和貢獻。

相關文章