使用 gh-pages 发布前端项目

场景

gh-pages

之前就有在使用 gh-pages 这个库，但由于名字并未想到它如此强大，甚至支持发布代码到任意 git 仓库。换言之，它可以将任意本地文件发布到远端 git 仓库，而不需要自己处理各种乱七八糟的问题。

问题

首先说一下我们之前前后端分离项目的发布流程

1. 修改打包的 webpack 脚本以支持引用 cdn 上的资源（本质上是修改路径）
2. 打包静态资源文件
3. 找到前端静态资源发布项目，切换到指定分支
4. 复制静态资源到特定目录
5. git commit && git push
6. 如果要发布 cdn 则再次对 cdn 仓库同样如此操作
7. 通知后端发布生产环境，进行验证

这其中涉及到几个重要痛点

1. 修改 webpack 配置，它极高的复杂度甚至产生了 webpack 配置工程师 这一职业岗位。
2. 处理文件复制提交 git 信息，有可能操作错误，每次发布生产都是一次心理上的考验
3. 发布失败难以快速解决，重新发布又需要手动再走一遍流程，所以有了我之前说过的发布一次要半个钟的事实

解决

不难看出，这本质上还是因为发布没有自动化带来的问题。但是，在 DevOps 还不存在的情况下，gh-pages 能够自动化下面的两步，同时，像 create-react-app/vue-cli 这种基于 webpack 进行高层次封装的工具提供了 PUBLIC_PATH 的概念，能够通过环境变量指定 index.html 入口引用的其他静态资源的基本路径，即便不去碰 webpack 也可以处理第一个问题了。

react, vue

大致过程如下

1. 在项目中添加依赖 yarn add -D env-cmd gh-pages

2. 在打包生产环境的资源时指定环境变量 PUBLIC_URL=[cdn 发布后的远端基本路径]

3. 添加发布 script 命令

   {
     "deploy": "yarn build:prod && yarn deploy:cdn && yarn deploy:publish",
     "deploy:publish": "gh-pages -d [本地目录] -e [远端 git 目录] -r [远端 git 地址] -b [远端 git 分支]",
     "deploy:cdn": "gh-pages -d [本地目录] -e [远端 git 目录] -r [远端 git 地址] -b [远端 git 分支]"
   }

现在，发布生产环境只需要两个步骤

1. 运行 deploy 命令
2. 通知后端发布 cdn/静态资源目录

虽然仍未能解决前后端不分离的项目，但，至少解决了所有新项目的发布问题了，不是么？

这里有一个项目已经如此实现，可以进行参考：website-static

总结

还是需要擅用工具，如果能够掌握更好的工具，效率的提高和自己的痛苦程度都能有极大的改善！