Gulp構建微信小程序

weapp-gulp 簡介 

基於gulp4.0 構建微信小程序工做流，實現七牛雲自動上傳+圖片壓縮+scss+封裝wx.request+實時編譯+多環境配置，腳手架開發小程序[weapp-gulp]

優化升級

weapp-gulp 1.0.0 優化了構建代碼，更簡潔易懂，易於修改

1. build 壓縮代碼
2. 刪除css中`PX`單位
3. 圖片替換路徑通配符%ASSETS_IMG%修改成%CDN_IMG%
4. 優化刪除代碼編譯文件刪除
5. 更改了啓動命令 使用 npm run start

在這裏你能夠找到：

1. px轉換rpx，讓開發更順手
2. scss開發，擺脫傳統css繁瑣
3. 壓縮圖片，自動上傳七牛雲or騰訊雲
4. wx.request封裝，相似axios的攔截器
5. 多環境開發，輕鬆切換不一樣環境

線上體驗

開始以前

Node 版本建議在v4 以上,本人使用8.9.1,低版本容易npm i安裝失敗

使用

 全局安裝gulp-cli

$ npm install --global gulp-cli複製代碼

 經過git clone下載項目文件。 

git clone https://github.com/sunnie1992/weapp-gulp複製代碼

 建議刪除.git目錄（Windows 用戶請手動刪除）

cd weapp-gulp
rm -rf .git複製代碼

安裝必要模塊

npm i複製代碼

修改配置文件

建議複製config.js並重命名爲config.custom.js，修改七牛雲/騰訊雲配置，根據 gulp-qiniu配置

本地開發

npm run start複製代碼

打包線上

npm run build複製代碼

其他任務

gulp clean：清除dist，tmp文件夾。

開發者工具

微信開發者工具直接打開根目錄便可，編譯完成的文件在dist目錄下

功能

SCSS 實時編譯爲 WXSS,圖片壓縮

使用Sass 預處理器，讓寫CSS 更加順暢。.scss文件會實時編譯爲微信小程序支持的.wxss文件。
WXSS(CSS) 中px 單位轉小程序單位rpx

以官方推薦的iPhone 6 爲標準設計格式，開發中直接寫px 便可自動轉換爲rpx。

// Input: src/pages/index/index.scss
.index__header {
    font-size: 14px;
    margin-top: 20px; 
}

// Output: dist/pages/index/index.wxss
.index__header {
    font-size: 28rpx;
    margin-top: 20px; 
}複製代碼

優化相對路徑的圖片引用，gulp複製文件和替換%CDN_IMG%/衝突，致使保存文件時小程序報錯

圖片上傳七牛雲cdn

小程序不支持相對路徑的圖片引用，僅支持帶https協議頭的絕對路徑。本工做流能夠將WXML 以及WXSS 文件中引用的相對路徑圖片上傳到雲存儲CDN 或經過FTP/SFTP 協議上傳到我的服務器空間。目前支持騰訊雲，七牛雲。

// Input: src/pages/index/index.wxml
<image src="%CDN_IMG%/logo.png"></image>

// Output: dist/pages/index/index.wxml
<image src="https://tweapp.top1buyer.com/logo.png"></image>複製代碼

請求數據

src/utils/request.js 設置攔截器
src/api 統一管理接口
src/pages/request/index.js中請求

import { getAppInfo } from '../../api/app'
//index.js
//獲取應用實例
var app = getApp()
Page({
    data: {
        appInfo: {}
    },
    onLoad: function() {
        // 請求數據
        getAppInfo().then(res => {
            this.setData({
                appInfo: res.data.app
            })
        })
    }
})
複製代碼

多環境配置 

在/src/config下的
_config_env.js
_config_sit.js
_config_prod.js
三個文件中配置不一樣環境對應的變量
在index.js中設置當前使用的環境

鳴謝

WeApp-Workflow

wx-extend 

意見反饋

您能夠掃描添加下方的微信並備註 Sol 加交流羣，給我提意見，交流學習

若是對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～