Gulp構建微信小程序

weapp-gulp 簡介

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

優化升級

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. 多環境開發，輕鬆切換不一樣環境

線上體驗

使用

-全局安裝 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 install
// or
npm i

• 修改配置文件

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

• 本地開發

npm run start

• 打包線上

npm run build

功能

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: 20rpx; 
}

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

優化相對路徑的圖片引用，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://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￣）づ╭❤～