Angular 5项目Git同步master至gh-pages分支问题咨询

看起来你已经成功把Angular项目部署到GitHub Pages了，但现在遇到了master源码分支和gh-pages静态文件分支的同步困扰——毕竟每次master更新后，都得手动重新构建推送才能让线上站点跟上，确实容易出疏漏。我给你几个实用的方案来理顺这个流程：

1. 规范手动同步流程（保持master分支干净） #

首先建议你把dist文件夹从master分支里移除，因为master应该只保留源码，构建产物放在gh-pages就够了：

• 先清理master里的dist文件夹：

  git checkout master
  git rm -r dist
  git commit -m "Remove dist folder from master to keep source clean"
  git push origin master
  

• 把dist/添加到.gitignore文件里，避免以后误提交构建产物到master：

  # .gitignore
  dist/
  

之后每次master分支更新后，按这个步骤同步gh-pages：

• 拉取最新的master源码：

  git checkout master
  git pull origin master
  

• 用生产环境配置构建项目（Angular 5的--prod参数会做压缩、代码优化，更适合部署）：

  ng build --prod
  

• 把dist文件夹推送到gh-pages分支：

  git subtree push --prefix=dist origin gh-pages
  

2. 用npm脚本简化部署步骤 #

手动敲命令太麻烦？可以在package.json里加一个部署脚本，一键完成构建+推送：

{
  "scripts": {
    "deploy": "ng build --prod && git subtree push --prefix=dist origin gh-pages"
  }
}

以后只要运行npm run deploy，就能自动完成构建并同步gh-pages分支，省心不少。

3. 处理subtree推送冲突 #

如果遇到gh-pages分支和本地dist内容冲突的情况，可以先拉取远程gh-pages的内容合并到本地subtree，解决冲突后再推送：

git subtree pull --prefix=dist origin gh-pages
# 解决冲突后提交
git commit -m "Resolve gh-pages sync conflicts"
git subtree push --prefix=dist origin gh-pages

这样调整后，master分支专注维护源码，gh-pages只负责静态部署文件，两者的同步流程就清晰流畅啦。

内容的提问来源于stack exchange，提问作者lycan1385