這篇文章主要講解了“基于Gulp微信小程序開發(fā)工作流舉例分析”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“基于Gulp微信小程序開發(fā)工作流舉例分析”吧！
三穗ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
目前開發(fā)微信小程序時(shí)，可選的技術(shù)方案大概有四種，分別是：
微信小程序原生開發(fā)
使用wepy框架
使用mpvue框架
使用taro框架
幾種開發(fā)方案，各有優(yōu)劣。使用第三方框架開發(fā)，可以享受框架帶來的開發(fā)便利，但對于小程序新增的諸多特性和功能，比如WXS模塊、自定義組件和插件等，受制于框架實(shí)現(xiàn)，無法使用。
而原生小程序的開發(fā)模式，又過于簡陋，就樣式來說，寫慣了less，stylus和sass的同學(xué)一定無法忍受wxss的這種寫法，基于此，決定使用gulp自動(dòng)化工具來構(gòu)建一套微信小程序開發(fā)的基礎(chǔ)模板，在完全保留微信小程序功能和特性的基礎(chǔ)上，又可以的使用less來寫樣式，同時(shí)加入圖片壓縮，命令行快速創(chuàng)建模板等特性，如此開發(fā)，快哉，快哉！
基于gulp+less構(gòu)建的微信小程序工程項(xiàng)目
項(xiàng)目圖片自動(dòng)壓縮
ESLint代碼檢查
使用命令行快速創(chuàng)建page、template和component
支持生產(chǎn)環(huán)境打包
0. 開始之前，請確保已經(jīng)安裝node和npm，全局安裝gulp-cli
$ npm install --global gulp-cli
1. 下載代碼
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
2. 進(jìn)目錄，安裝依賴
$ cd wx-miniprogram-boilerplate && npm install
3. 編譯代碼，生成dist目錄，使用開發(fā)者工具打開dist目錄
$ npm run dev （開發(fā)環(huán)境打包） $ npm run test (測試環(huán)境打包)
4. 新建page、template或者component
gulp auto -p mypage 創(chuàng)建名為mypage的page文件 gulp auto -t mytpl 創(chuàng)建名為mytpl的template文件 gulp auto -c mycomponent 創(chuàng)建名為mycomponent的component文件 gulp auto -s index -p mypage 復(fù)制pages/index中的文件創(chuàng)建名稱為mypage的頁面
5. 上傳代碼前編譯
$ npm run build （生產(chǎn)環(huán)境打包）
6. 上傳代碼，審核，發(fā)版
wx-miniprogram-boilerplate ├── dist // 編譯后目錄 ├── node_modules // 項(xiàng)目依賴 ├── src │ ├── components // 微信小程序自定義組件 │ ├── env // 請求域名配置 │ ├── images // 頁面中的圖片和icon │ ├── pages // 小程序page文件 │ ├── styles // ui框架，公共樣式 │ ├── template // 模板 │ ├── utils // 公共js文件 │ ├── app.js │ ├── app.json │ ├── app.less │ ├── project.config.json // 項(xiàng)目配置文件 │ └── api.config.js // 項(xiàng)目api接口配置 ├── .gitignore ├── .eslintrc.js ├── package-lock.json ├── package.json └── README.md
Tasks: dev 開發(fā)編譯，同時(shí)監(jiān)聽文件變化 test 整體編譯，請求指向測試環(huán)境 build 整體編譯 clean 清空產(chǎn)出目錄 wxml 編譯wxml文件（僅僅copy） js 編譯js文件，同時(shí)進(jìn)行ESLint語法檢查 json 編譯json文件（僅僅copy） wxss 編譯less文件為wxss img 編譯壓縮圖片文件 watch 監(jiān)聽開發(fā)文件變化 devEnv/testEnv/prodEnv 生成對應(yīng)環(huán)境的請求域名配置 auto 自動(dòng)根據(jù)模板創(chuàng)建page,template或者component(小程序自定義組件) gulp auto 選項(xiàng)： -s, --src copy的模板 [字符串] [默認(rèn)值: "_template"] -p, --page 生成的page名稱 [字符串] -t, --template 生成的template名稱 [字符串] -c, --component 生成的component名稱 [字符串] --msg 顯示幫助信息 [布爾] 示例： gulp auto -p mypage 創(chuàng)建名為mypage的page文件 gulp auto -t mytpl 創(chuàng)建名為mytpl的template文件 gulp auto -c mycomponent 創(chuàng)建名為mycomponent的component文件 gulp auto -s index -p mypage 復(fù)制pages/index中的文件創(chuàng)建名稱為mypage的頁面
Q: 為什么工作流中沒有加入js轉(zhuǎn)換，樣式補(bǔ)全以及代碼壓縮？
A: 微信開發(fā)者工具中自帶babel將ES6轉(zhuǎn)ES5,樣式補(bǔ)全以及js代碼壓縮等功能，在此工作流中不做額外添加。 
Q: _template目錄的文件有什么用？
A: 使用gulp auto命令自動(dòng)生成文件，-s參數(shù)可以指定copy的對象，默認(rèn)情況下是以對應(yīng)目錄下文件夾為_template中的文件為copy對象的。開發(fā)者可以根據(jù)業(yè)務(wù)需求，自定義_template下的文件。
Q: _template目錄的文件是否會被編譯到dist目錄？
A: 不會。
感謝各位的閱讀，以上就是“基于Gulp微信小程序開發(fā)工作流舉例分析”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對基于Gulp微信小程序開發(fā)工作流舉例分析這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
