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￣）づ╭❤～