Awesome Frontend

场景

gh-pagesopen in new window

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

问题

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

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

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

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

解决

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

reactopen in new window, vueopen in new window

大致过程如下

  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-staticopen in new window

总结

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