gulp小程序高效开发

43次阅读

共计 626 个字符,预计需要花费 2 分钟才能阅读完成。

简介

基于 gulp4.0 实现七牛云自动上传 + 图片压缩 +scss+ 封装 wx.request+ 实时编译脚手架开发小程序

根据 WeApp-Workflow 修改

在这里你可以找到

  1. 一个简单的 gulp 构建的小程序
  2. 友好的使用 scss,高效开发
  3. 压缩图片,自动上传七牛云
  4. px 转换 rpx
  5. 封装 request,添加拦截器

介绍

SCSS 实时编译为 WXSS, 图片压缩

新增 图片上传七牛云 cdn

新增 请求数据

优化相对路径的图片引用,gulp 复制文件和替换 %ASSETS_IMG%/ 冲突,导致保存文件时小程序报错

开始使用

Node 版本建议在 v4 以上, 本人使用 8.9.1, 低版本容易 npm i 安装失败

安装

0、请先全局按照 Gulp-cli

npm install gulp-cli -g

1、通过 git clone 下载项目文件。

git clone https://github.com/sunnie1992/weapp-gulp

2、建议删除 .git 目录(Windows 用户请手动删除)

cd weapp-gulp
rm -rf .git

3、安装必要模块

npm i

4、启动开发

建议复制 config.js 并重命名为config.custom.js,修改七牛云配置,根据 gulp-qiniu 配置

gulp 
or
npm run dev

其余任务:gulp clean:清除 disttmp 文件夹。

鸣谢

WeApp-Workflow

意见反馈

您可以扫描添加下方的微信并备注 Soul 加交流群,给我提意见,交流学习

如果对你有帮助送我一颗小星星(づ~3~)づ╭❤~

正文完
 0