evamp-cli gulp 小程序 CLI
基于 gulp 的小程序工作流 CLI
功能
- 开发模式热更新 scss 自动转 wxss
- 生产环境构建代码压缩删除注释
- ES6 代码转 ES5
目录结构
.
├── build 项目配置文件
├── cli CLI文件
├── src 开发模式小程序目录
├── tests 自动化测试目录
├── node_modules node依赖包
├── dist 生产环境小程序目录
├── package.json 项目配置
├── gulpfile.js gulp配置文件
└── nodemon.json nodemon配置文件
! 注意 不要将 package.json 包安装在小程序目录！这样做是保证根目录一个 node_modules 可以被所有项目引用，节约空间。
小程序 npm 插件额外配置
! 由于小程序的插件包必须依赖 package.json，并且 node_modules 必须和 package.json 同目录，因此我们需要配置小程序的 project.config.json 文件。 额外配置如下
{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "../package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}! 以上配置的目的是为了开发、生产模式小程序都可以直接依赖根目录的 node_modules，同时小程序目录中不会出现额外的文件、文件夹，代码上传也无需做额外操作。
安装
npm i evamp-cli -g # 全局安装 CLI
evamp new <projectName> # 创建项目使用
- 使用模板（**必须使用
.tgz**格式的模板资源包）
# 添加小程序模板
evamp add <templateName> <templateURL> # 只支持 .tgz 格式的资源包
# 查看所有模板
evamp list
# 使用模板
evamp new <projectName> --template=<templateName>
- 开发模式
! 在开发模式下，请使用小程序开发工具打开 src 目录，此时，src 目录为小程序开发模式根目录。然后命令行执行
npm run dev命令，此时，会动态监听项目中.scss文件的变化，动态编译成.wxss，并放在原来的目录。注意，千万不要去监听.wxss的变化，因为这样会触发nodemon死循环。因此，目前还不能处理.wxss的变化。
- 生产模式
! 命令行执行
npm run build。会自动打包到dist下，并且做代码压缩去注释。
插件构建
! 在对应的小程序目录下，使用小程序开发工具直接构建 npm 即可。（请务必配置了 project.config.json 。并且保证已经在根目录执行了安装操作）
开发工具
! 为了方便代码提示等，开发工具仍然使用微信小程序开发工具，只需要额外运行一个命令行做处理
.scss的操作，其他均不变。