weapp-gulp 简介
基于gulp4.0 构建微信小程序工作流，实现七牛云自动上传+图片压缩+scss+封装wx.request+实时编译+多环境配置，脚手架开发小程序[weapp-gulp]
优化升级
weapp-gulp 1.0.0 优化了构建代码，更简洁易懂，易于修改
- build 压缩代码
- 删除css中`PX`单位
- 图片替换路径通配符
%ASSETS_IMG%修改为%CDN_IMG% - 优化删除代码编译文件删除
- 更改了启动命令 使用 npm run start
在这里你可以找到：
- px转换rpx，让开发更顺手
- scss开发，摆脱传统css繁琐
- 压缩图片，自动上传七牛云or腾讯云
- wx.request封装，类似axios的拦截器
- 多环境开发，轻松切换不同环境
线上体验
开始之前
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中设置当前使用的环境
鸣谢
意见反馈
获取更多技术相关文章，关注公众号”前端女塾“。
回复前端，即可加入”前端仙女群“
您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～
