Node+GitLab实现小程序CI系统，前端开发原则，精通web前端开发

3. 选择构建环境打包 

4. 上传至小程序后台 

5. 登录小程序后台设置体验版获取二维码 

6. 搞定收工，全程无需发布人员操作任何代码相关，只要会点下一步，有发布权限即可

开发过程

流程图

后端功能实现

• 环境依赖

• 实现上传小程序后台接口；

• 实现拉取git项目到本地的接口；

• 实现获取gitlab项目信息，分支及tag的接口；

• 实现切换分支及tag接口

• 实现项目编译打包的接口；

• 实现拉起开发者工具的接口；

环境依赖

在后端功能的实现上用了以下框架和模块

• express （node框架）

• request（网络请求模块）

• fs （文件处理模块）

• log4js （输出log日志）

• process（子进程模块，用来在node中执行shell命令）

1. 拉起开发者工具的接口

mac系统上开发者工具会默认的安装路径是/Applications/wechatwebdevtools.app， 通过process模块执行shell命令open /Applications/wechatwebdevtools.app即可打开开发者工具。

2. 实现上传小程序后台接口

上传接口是这个系统的核心，虽然很简单但要实现这个接口还是需要你对小程序工具的http调用有一定了解，接下来详细说一下如何完成此功能：

上文说到小程序开发者工具提供了命令行与 HTTP 服务两种接口供外部调用，开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。

第一步（开启http服务）

打开你的开发者工具 设置——>安全设置——>服务端口，因为调用开发者工具提供的http服务一定要拼接本地的端口号，所以后续所有的操作都是要基于开发者工具开启且服务端口开启的状态下进行操作的，默认情况下服务端口是关闭的，http 服务在工具启动后自动开启，HTTP 服务端口号在用户目录下记录，可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装。

 第二步（如何拿到开发者工具端口号）

在确保你的开发者工具服务端口开启的情况下，我们可以尝试通过node的fs模块去读取储存的文件信息读取端口号，端口号文件是开发者工具自动生成的，所以它的位置是固定的，但不同系统中的默认位置也不相同。

端口号文件位置：

macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide

微信web开发者工具/User Data/Default/.ide

注意！！！

像是在mac中直接去读取这个默认路径是获取不到的，因为mac中一般会将工具安装在你的当前账户文件夹下，所以如果发现无法读取的情况可以到Uers的文件夹找找看。 比如我的mac上要想访问端口文件完整路径是这样的：

const portPath = '../../Users/admin/Library/Application\ Support/微信web开发者工具/Default/.ide';

读取端口的功能封装，后续会用到

第三步（上传）

接口定义：

• URL：/upload

• HTTP 方法：GET

通过调用获取端口号的方法，请求上传接口拼接端口，指定项目上传目录，就是编译出来的dist文件夹目录，将接收的描述和版本号一并拼接发送上传请求即可。

 get请求封装

3. 实现拉取git项目到本地的接口

这个接口的实现主要是通过Node接收项目地址然后执行git clone的shell命令实现， 需要用到Node的child_process子进程模块用来执行shell脚本。

代码实现

4. 实现获取gitlab项目信息，分支及tag的接口

Gitlab有一个非常强大的API系统，几乎所有的功能都有相应的API接口，为了使用API，需要从Gitlab中获取私有token。

1. 登陆你的Gitlab

2. 点击登陆的帐户，点击settings

3. 点击Access Tokens 

4. 根据自己的需要创建适合需要的Tokens 

成功拿到token之后只需在请求的时候作为query参数传递即可:

项目分支信息API api/v3/projects/ [projectId] /repository/branches

小程序项目tagaAPI api/v3/projects/ [projectId] /repository/tags

5.实现切换分支及tag接口

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！