基於Gulp微信小程序開發工做流，支持less樣式編寫，支持ESLint代碼檢查等功能

時間 2019-11-08

標籤基於 gulp 微信程序開發支持樣式編寫 eslint 代碼檢查功能欄目 JavaScript 简体版

原文原文鏈接

wx-miniprogram-boilerplate

基於Gulp構建的微信小程序開發工做流html

連接: https://pan.baidu.com/s/1lwZ4nPRpubw33pEfbsQrlw 提取碼: k54r

適用場景

目前開發微信小程序時，可選的技術方案大概有四種，分別是：vue

幾種開發方案，各有優劣。使用第三方框架開發，能夠享受框架帶來的開發便利，但對於小程序新增的諸多特性和功能，好比WXS模塊、自定義組件和插件等，受制於框架實現，沒法使用。node

而原生小程序的開發模式，又過於簡陋，就樣式來講，寫慣了less，stylus和sass的同窗必定沒法忍受wxss的這種寫法，基於此，決定使用gulp自動化工具來構建一套微信小程序開發的基礎模板，在徹底保留微信小程序功能和特性的基礎上，又能夠的使用less來寫樣式，同時加入圖片壓縮，命令行快速建立模板等特性，如此開發，快哉，快哉！git

特性

基於gulp+less構建的微信小程序工程項目
項目圖片自動壓縮
ESLint代碼檢查
使用命令行快速建立page、template和component
支持生產環境打包

Getting Started

0. 開始以前，請確保已經安裝node和npm，全局安裝gulp-cligithub

$ npm install --global gulp-cli

1. 下載代碼npm

$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. 進目錄，安裝依賴json

$ cd wx-miniprogram-boilerplate && npm install

3. 編譯代碼，生成dist目錄，使用開發者工具打開dist目錄gulp

$ npm run dev （開發環境打包）
$ npm run test (測試環境打包)

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 // 微信小程序自定義組件
│    ├── env        // 請求域名配置
│    ├── 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
├── package-lock.json
├── package.json
└── README.md

Gulp說明

Tasks:
  dev              開發編譯，同時監聽文件變化
  test             總體編譯，請求指向測試環境
  build            總體編譯

  clean            清空產出目錄
  wxml             編譯wxml文件（僅僅copy）
  js               編譯js文件，同時進行ESLint語法檢查
  json             編譯json文件（僅僅copy）
  wxss             編譯less文件爲wxss
  img              編譯壓縮圖片文件
  watch            監聽開發文件變化
  devEnv/testEnv/prodEnv 生成對應環境的請求域名配置

  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: 不會。