gulp实现微信小程序开发

背景

        因个人开发原生微信小程序感觉很枯燥，想到可以使用打包工具去优化开发流程，在浏览网上很多的使用了gulp，webpack实现小程序开发的项目，各式各样，但是总觉得少了很多我想要的，比如热更新，npm包构建，新es6+使用等。

        于是想着自己实现一套符合个人预期的架子，又是可配置的，供公司和大家使用，于此诞生此项目，希望能帮到大家，或者有好的建议和想法大家一起交流，接下来就为大家大概的介绍此项目，并想在后续对此项目进行详细的系列讲解和做一个小程序给大家观摩，谢谢您的耐心阅读！

项目地址

# 国内快速git
$ git clone https://gitee.com/xiaomo_simon/gulp-mini-program


# GitHub地址
$ git clone https://github.com/xiaomosimon/gulp-mini-program

 功能

• 可兼容微信开发平台构建npm（暂时解决无法使用第三方库问题）
• 可使用sass，自动转化为wxss到打包后对应文件夹下
• babel转化js并压缩
• 压缩image，json，wxml
• 热更新
• 自动赋值静态文件到打包后对应文件夹下（可配置）
• eslint构建时校验（可配置）
• 新建page或component模板
• git commit之前eslint检测（可配置）

项目环境

1. node+npm
2. gulp-cli         (在命令行执行  npm i -g gulp-cli  进行下载)
3. 微信开发者工具

项目介绍

初始化

首先在project.config.json文件里配置自己的小程序根目录miniprogramRoot和小程序appid

{
  "miniprogramRoot": "miniprogram/",
  "appid": "12313123123"
}

然后在项目根目录执行npm install

$ npm install

用法

基本

直接使用则如下：

# 开发模式，进行新增，修改，删除，自动构建对应的文件到输出目录

# 请在project.config.json文件里配置miniprogramRoot值为【开发时的小程序根目录】

$ npm run dev



# 生产模式，进行构建打包

# 请上传版本的时候在project.config.json文件里配置miniprogramRoot值为【打包后的小程序根目录】

$ npm run build

Tip：如需自定义配置请在build文件夹内文件和gulpfile.js文件进行配置（前提是需要有gulp基础）

添加模板

可添加page或component，但需要安装 gulp 命令行工具: gulp-cli

# 安装到全局

$ npm install --global gulp-cli

使用如下:

# 新建page或component

# 命令需要带 p 或 c 参数 (page 和 component)



# 在入口根目录下的components目录下添加mine组件文件夹

$ gulp add -c mine



# 在入口根目录下的pages目录下添加mine组件文件夹

$ gulp add -p mine

Tip：如需自定义配置请在.template文件夹内文件和gulpfile.js文件进行配置

使用第三方包并使用开发工具构建npm

根据下图可知需要在src（我们实际开发目录下）进行npm init，然后下载第三包，使project.config.json文件里"miniprogramRoot"为"src/"，最后点  工具 --> 构建npm 生成miniprogram_npm包，如此就可以直接在js下直接引入第三包，且在最后开发完成后或热更新状态下会直接copy到打包目录下

详情如下：

1、在src（我们实际开发目录下）进行npm init

2、下载第三包，这里以wxbarcode为例

# 进入到实际开发目录，默认是src文件夹
$ cd src


# 下载生成二维码条码库：wxbarcode
$ npm installl wxbarcode

3、修改project.config.json文件里"miniprogramRoot"为"src/"

4、然后进行 工具 --> 构建npm 生成miniprogram_npm包

5、如此就可以直接在js下直接引入第三包

打包后可正常运行

其他

minimist定义变量

可通过引入build/commonConfig.js获取变量存储对象commonConfig.parseArgs;

可使用gulp命令加上-形式进行变量定义;

# 添加变量到build任务上

$ gulp build -mode development -custom hellWord

使用package.json配置scripts时，请使用 --xx;

{
 "scripts": {
   "dev": "gulp dev",
   "build": "gulp build --mode production",
   "test": "gulp dev --mode test --test hello"
 }
}

git commit之前eslint校验

依赖：

$ npm install --save-dev pre-commit lint-staged

配置：
package.json

{
    "scripts": {
        "dev": "gulp dev",
        "build": "gulp build --mode production",
        "lint-staged": "lint-staged"
    },
    "pre-commit": "lint-staged",
    "lint-staged": {
        "src/**/*.js": "eslint"
    }
}

问题

1. 如何优雅支持新es6+语法并转化为es5；

2. Q：如何进行第三方库的打包并能使小程序正常运行，例如moment.js lodash.js等工具库；

    A：当前已以 使用第三方包并使用开发工具构建npm 方式解决引入第三方库的使用

3. 如何支持wxs使用es6语法被babel转化后还能使小程序正常运行；eg:

let a = 1000;

// --> 转化为如下代码，但是小程序不支持

var a = 1e3;

 

希望

1. 写这个架子的时候，我是想通过这个架子进行个人的小程序开发，在原生编写小程序下，会出现包容量越来越大的情况，也会有很多解决的办法，分包，工具压缩等，但也看到很多混杂的点，比如我写到的问题1和3。

2. 我想一边使用这个架子做一个小程序，一边去优化这个架子，并邀请志友参与此项目的优化和改进，并通过此达到学习的目的，欢迎您的pr。

3. 正在梳理编写流程，将具体的实现和思考流程放在各社区，方便大家进行自定义配置和使用。