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/sunniejs/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

意见反馈

获取更多技术相关文章，关注公众号”前端女塾“。
回复加群，即可加入”前端仙女群“

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～