使用Gulp 构建微信小程序

Gulp 开发微信小程序

• 使用 sass 开发 wxss
• 支持 px2rpx（将px转换成rpx, 1px = 2rpx）
• 支持es6/7 开发 js（es6 代码可转换成es5）

项目目录结构

github地址：https://github.com/ityadong/gulp_wechat_cli

[ 
     |-- gulpfile.js', //gulp打包工具配置文件
     |-- package.json', //项目依赖环境
     |-- README.md',
     |-- client', //小程序开发环境，写代码的文件
     |   |-- app.js', //小程序逻辑 程序入口
     |   |-- app.json', //小程序公共配置
     |   |-- app.scss', //小程序公共样式表
     |   |-- project.config.json', // 小程序项目配置
     |   |-- filter', //自定义的 过滤器
     |   |   |-- filter.wxs',
     |   |-- img', // 图片资源
     |   |   |-- wave_two.png',
     |   |-- lib', 
     |   |   |-- API.js', // API文件 后台接口统一存放
     |   |-- pages',
     |   |   |-- index',
     |   |   |   |-- index.js',
     |   |   |   |-- index.json',
     |   |   |   |-- index.scss',
     |   |   |   |-- index.wxml',
     |   |   |-- logs',
     |   |       |-- logs.js',
     |   |       |-- logs.json',
     |   |       |-- logs.scss',
     |   |       |-- logs.wxml',
     |   |-- utils',
     |       |-- util.js',
     |-- dist' //生产环境，开发环境生成的文件
   ]

使用

想了解gulp，请移步  https://www.gulpjs.com.cn/docs/getting-started/

# 安装项目依赖
npm install

# 启动 gulp 编译 client 文件夹，会自动生成dist文件夹(编译的时候可能会报错，将dist整个文件删除，重新编译即可)
npm run dev

# 上线打包
npm run build