基於Gulp小程式開發工作流，區分開發環境和生產環境

空手接白刃發表於2018-09-17
開發環境

github.com/Bowennan/gu… 

  1. clone 到本地

  2. 安裝依賴 npm install 或者 yarn (yarn 比較穩定不需要翻牆)

  3. 初始化第一個頁面 index 執行： npm run create index (注意：第一次安裝會自動建立page資料夾，會有提示，再執行一次此命令會真正建立index頁面相關的檔案) 本工作流所建立的檔案是按照小程式的規範建立的，只不過引入了scss, 進行了程式碼壓縮以及圖片壓縮, 新建頁面後會自動新增到全域性的app.json中 之後需要新增新的頁面直接執行 npm run create serach（這次建立了serach頁面 wxml scss js json）

  4. 小程式的元件書寫同官網 在components資料夾下建立你的元件，不要包裹任何層級資料夾, 寫法見小程式官網 小程式api

  5. 建立基本的頁面後，啟動專案 gulp dev ，將會開啟一個具有實時監聽的伺服器，並在根目錄下生成 dist檔案， 你只需要開啟 微信開發者工具，將專案目錄選擇為dist,並填寫你的 appId 和 程式標題

  6. 這個時候你就可以隨意選擇一個編輯器，開始編輯，凡是page裡的檔案都將獲得監聽，元件也一樣，但是全域性的配置檔案 比如： app.js app.json app.scss, 包括外層檔案 比如： 資料請求 urlconfig，這些之所以不進行監聽：要求你在專案開始時就進行正確的配置， 中間如修改， 請重新啟動專案

  7. 本工作流很好的區分了測試環境和正式開發環境 dev(測試環境) pro（正式環境）
    urlconfig 檔案中有兩個檔案分別是 dev_url.js 和 pro_url.js 前者放置測試的用地址 後者放置正式釋出地址, 使用時把他當做外部js檔案，使用import 匯入到 頁面檔案的js中即可， 你不用擔心打包，gulp dev 只會命中 dev環境的地址 而 gulp 將會命中pro環境中的地址 (溫馨提示： 在你小程式的管理端（官網）配置好地址，不然也是徒勞哦)

  8. 打包釋出： 執行 gulp 即可, 此命令不在監聽任何檔案變動，單純的打包程式碼壓縮圖片壓縮 dist 為最終輸出檔案

  9. 有問題歡迎反饋和探討 來自Bowennan druidking@126.com


相關文章