前言
在任何專案開發中都涉及到專案的搭建，搭建專案的時候，首先考慮是選擇一款合適的專案構建工具，目前最火的就是webpack了，它的定位是模組打包工具，對於小程式而言，更多涉及到靜態資源的分類管理，所以gulp、grunt、FIS這類前端構建工具很合適。
gulp工具鏈很完善，小程式開發本來就是本地開發模式，程式碼必須在小程式開發工具提供的runtime中才可以跑起來，不涉及服務搭建相關知識，所以webpack的devserver在這裡也用不到。
專案目錄結構
基本的專案結構如下圖所示：
├── cloud-functions // 雲函式資料夾
├── dist // 構建工具 release 之後的資料夾
├── gulpfile.js // Gulp 配置檔案
├── node_modules
├── package.json // npm 描述檔案
└── src // 實際開發的原始碼資料夾
├── app.js // 入口 js
├── app.json // App 配置
├── app.scss // App 整體樣式
├── components // 小程式元件，例如 icon 類這些通用元件
├── images // 小程式靜態圖片
├── lib // 公共 lib
├── pages // 小程式 page 頁面
│ ├── index.js
│ ├── index.json
│ ├── index.scss
│ ├── index.wxml
│ └── index.wxs
└── project.config.json // 小程式專案配置...
複製程式碼