# 实战篇 1：小程序开发环境搭建

微信小程序虽然提供自己的 IDE 开发工具，但是对于用惯了 VS Code、Sublime 等编辑器的前端工程师来说，其体验还是挺差的，因此本项目中，只将微信小程序开发者工具作为模拟器、调试和代码上传的工具，其他开发使用自己熟练的编辑器 / IDE 即可。

除了选择自己熟练的编辑器 / IDE 之外，还应该在代码层面提高编码体验，本实战项目使用 Sass 和 ES6 语法来写代码，通过构建工具编译成小程序可以识别的 WXSS 和 ES5，最后也使用构建工具压缩和优化静态资源。

对于小程序云开发（腾讯云）的测试，本项目使用官方提供的 SCF-Cli 来本地测试云函数，这样云函数的修改就不需要每次都上传到云端之后再测试了，可以提高研发效率。

整体技术选型如下：

• VS Code： 编辑器，用于代码编写
• Gulp：前端项目构建工具
• Sass：小程序样式表
• ES6：采用 ES6 语法编写 JS 代码，Babel 做编译处理

本节重点介绍使用 Gulp 搭建小程序开发环境。

# Gulp 和 webpack

目前，前端最火的打包工具无疑是 webpack，而 webpack 的产品定位是模块打包工具，对于小程序开发，涉及项目资源分类管理，所以 Gulp、Grunt、FIS 这类前端工程构建工具很合适。

Gulp 可以对不同的文件类型、文件夹、文件等多种方式进行不同的处理流程，像小程序项目中多种文件类型需要不同的构建流程，使用 Gulp 的 task 就非常方便管理。

另外 Gulp 的 watch 功能也可以监控源文件，当源码发生变化时，立即执行对应 task，将修改后的代码编译到小程序开发工具监控的目录中；在生态建设上，Gulp 工具链也很完善。小程序开发本来就是本地开发模式，代码必须在小程序开发者工具提供的 Runtime 中才可以跑起来，不涉及服务搭建相关的知识，所以 webpack 的 devserver 也没有用武之地。

综上，本小册采用 Gulp 来搭建小程序开发环境。

# 项目目录结构

首先介绍下项目的目录结构，下面的目录结构是最开始的目录结构，注释中描述了文件夹（或文件）具体是做什么用的。

├── cloud-functions // 云函数文件夹
├── dist            // 构建工具 release 之后的文件夹
├── gulpfile.js     // Gulp 配置文件
├── node_modules
├── package.json    // npm 描述文件
└── src             // 实际开发的源代码文件夹
    ├── app.js      // 入口 js
    ├── app.json    // App 配置
    ├── app.scss    // App 整体样式
    ├── components  // 小程序组件，例如 icon 类这些通用组件
    ├── images      // 小程序静态图片
    ├── lib         // 公共 lib
    ├── pages       // 小程序 page 页面
    │   ├── index.js
    │   ├── index.json
    │   ├── index.scss
    │   ├── index.wxml
    │   └── index.wxs
    └── project.config.json // 小程序项目配置

# Gulp 工程化打包方案

针对上面的开发目录，我们要达到的目标是：将 src 目录下的文件，编译到小程序开发者工具实际运行的 dist 目录下，先在 gulpfile.js 中定义这两个目录的变量：

const src = './src'
const dist = './d