這篇文章主要講解了“在Gulp基礎(chǔ)上怎么構(gòu)建微信小程序”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“在Gulp基礎(chǔ)上怎么構(gòu)建微信小程序”吧！

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)江門免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

適用場(chǎng)景

三種開發(fā)方案，各有優(yōu)劣。使用第三方框架開發(fā)，可以享受框架帶來的開發(fā)便利，但對(duì)于小程序新增的諸多特性和功能，比如WXS模塊、自定義組件和插件等，受制于第三方框架，無法使用。

而原生小程序的開發(fā)模式，又過于簡(jiǎn)陋，就樣式來說，寫慣了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

Getting Started

0. 開始之前，請(qǐng)確保已經(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

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的頁(yè)面

5. 上傳代碼前編譯

$ npm run build

6. 上傳代碼，審核，發(fā)版

工程結(jié)構(gòu)

wx-miniprogram-boilerplate
├── dist         // 編譯后目錄
├── node_modules // 項(xiàng)目依賴
├── src 
│    ├── components // 微信小程序自定義組件
│    ├── images     // 頁(yè)面中的圖片和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               // ESLint
├── package-lock.json
├── package.json
└── README.md

Gulp說明

Tasks:
  dev              開發(fā)編譯，同時(shí)監(jiān)聽文件變化
  build            整體編譯

  clean            清空產(chǎn)出目錄
  wxml             編譯wxml文件（僅僅copy）
  js               編譯js文件，同時(shí)進(jìn)行ESLint語(yǔ)法檢查
  json             編譯json文件（僅僅copy）
  wxss             編譯less文件為wxss
  img              編譯壓縮圖片文件
  watch            監(jiān)聽開發(fā)文件變化
  
  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的頁(yè)面

Q&A

Q: 為什么工作流中沒有加入js轉(zhuǎn)換，樣式補(bǔ)全以及代碼壓縮？
A: 微信開發(fā)者工具中自帶babel將ES6轉(zhuǎn)ES5,樣式補(bǔ)全以及js代碼壓縮等功能，在此工作流中不做額外添加。

Q: _template目錄的文件有什么用？
A: 使用gulp auto命令自動(dòng)生成文件，-s參數(shù)可以指定copy的對(duì)象，默認(rèn)情況下是以對(duì)應(yīng)目錄下文件夾為_template中的文件為copy對(duì)象的。開發(fā)者可以根據(jù)業(yè)務(wù)需求，自定義_template下的文件。

Q: _template目錄的文件是否會(huì)被編譯到dist目錄？
A: 不會(huì)。

感謝各位的閱讀，以上就是“在Gulp基礎(chǔ)上怎么構(gòu)建微信小程序”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)在Gulp基礎(chǔ)上怎么構(gòu)建微信小程序這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文標(biāo)題：在Gulp基礎(chǔ)上怎么構(gòu)建微信小程序-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/eoedg.html