这篇文章主要讲解了“在Gulp基础上怎么构建微信小程序”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“在Gulp基础上怎么构建微信小程序”吧！
专注于为中小企业提供成都网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业
江门免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
适用场景
三种开发方案，各有优劣。使用第三方框架开发，可以享受框架带来的开发便利，但对于小程序新增的诸多特性和功能，比如WXS模块、自定义组件和插件等，受制于第三方框架，无法使用。
而原生小程序的开发模式，又过于简陋，就样式来说，写惯了less，stylus和sass的同学一定无法忍受wxss的这种写法，基于此，决定使用gulp自动化工具来构建一套微信小程序开发的基础模板，在完全保留微信小程序功能和特性的基础上，又可以的使用less来写样式，同时加入图片压缩，命令行快速创建模板等特性，如此开发，快哉，快哉！
特性
Getting Started
0. 开始之前，请确保已经安装node和npm，全局安装gulp-cli
$ npm install --global gulp-cli
1. 下载代码
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
2. 进目录，安装依赖
$ cd wx-miniprogram-boilerplate && npm install
3. 编译代码，生成dist目录，使用开发者工具打开dist目录
$ npm run dev
4. 新建page、template或者component
gulp auto -p mypage 创建名为mypage的page文件
gulp auto -t mytpl 创建名为mytpl的template文件
gulp auto -c mycomponent 创建名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件创建名称为mypage的页面
5. 上传代码前编译
$ npm run build
6. 上传代码，审核，发版
工程结构
wx-miniprogram-boilerplate
├── dist // 编译后目录
├── node_modules // 项目依赖
├── src
│ ├── components // 微信小程序自定义组件
│ ├── images // 页面中的图片和icon
│ ├── pages // 小程序page文件
│ ├── styles // ui框架，公共样式
│ ├── template // 模板
│ ├── utils // 公共js文件
│ ├── app.js
│ ├── app.json
│ ├── app.less
│ ├── project.config.json // 项目配置文件
│ └── api.config.js // 项目api接口配置
├── .gitignore
├── .eslintrc.js // ESLint
├── package-lock.json
├── package.json
└── README.md
Gulp说明
Tasks:
dev 开发编译，同时监听文件变化
build 整体编译
clean 清空产出目录
wxml 编译wxml文件（仅仅copy）
js 编译js文件，同时进行ESLint语法检查
json 编译json文件（仅仅copy）
wxss 编译less文件为wxss
img 编译压缩图片文件
watch 监听开发文件变化
auto 自动根据模板创建page,template或者component(小程序自定义组件)
gulp auto
选项：
-s, --src copy的模板 [字符串] [默认值: "_template"]
-p, --page 生成的page名称 [字符串]
-t, --template 生成的template名称 [字符串]
-c, --component 生成的component名称 [字符串]
--msg 显示帮助信息 [布尔]
示例：
gulp auto -p mypage 创建名为mypage的page文件
gulp auto -t mytpl 创建名为mytpl的template文件
gulp auto -c mycomponent 创建名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件创建名称为mypage的页面
Q&A
Q: 为什么工作流中没有加入js转换，样式补全以及代码压缩？
A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能，在此工作流中不做额外添加。
Q: _template目录的文件有什么用？
A: 使用gulp auto命令自动生成文件，-s参数可以指定copy的对象，默认情况下是以对应目录下文件夹为_template中的文件为copy对象的。开发者可以根据业务需求，自定义_template下的文件。
Q: _template目录的文件是否会被编译到dist目录？
A: 不会。
感谢各位的阅读，以上就是“在Gulp基础上怎么构建微信小程序”的内容了，经过本文的学习后，相信大家对在Gulp基础上怎么构建微信小程序这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！
标题名称：在Gulp基础上怎么构建微信小程序-创新互联
转载来于：
http://cdkjz.cn/article/eoedg.html
