如何将Angular5项目dist文件夹发布到GitHub并行分支SRC

我来帮你搞定这个需求！其实实现起来很简单，核心思路就是让master分支专门存放项目源码，SRC分支只保留构建后的dist文件夹内容，下面是一步步的操作指南：

基础手动操作步骤 #

• 第一步：确保源码分支状态干净
  先切换回master分支，把所有未提交的源码改动都保存好：

  git checkout master
  git add .
  git commit -m "保存最新项目源码"
  git push origin master
  

  这一步很重要，避免后续操作丢失未提交的代码

• 第二步：创建并初始化空的SRC分支
  我们需要创建一个完全干净的分支（不带任何历史源码），所以用--orphan参数：

  git checkout --orphan SRC
  # 删除分支下所有文件，确保完全清空
  git rm -rf .
  

• 第三步：构建Angular项目生成dist文件
  执行Angular的生产构建命令，生成优化后的产物：

  ng build --prod
  

  Angular 5默认会把构建结果输出到dist文件夹，如果你的项目配置了自定义输出目录，记得替换成对应路径

• 第四步：将构建产物移到SRC分支根目录并提交
  把dist里的所有内容复制到当前分支的根目录（GitHub Pages需要从根目录读取页面文件）：

  # Linux/macOS系统用这个命令
  cp -r dist/* .
  # Windows系统用这个命令
  xcopy dist\* . /E /H
  

  然后提交构建结果：

  git add .
  git commit -m "发布GitHub Pages构建结果"
  git push origin SRC
  

• 第五步：切回源码分支继续开发
  完成发布后，切回master分支就可以继续写代码了：

  git checkout master
  

进阶：一键发布脚本（推荐） #

如果需要频繁发布，可以写一个脚本自动化整个流程，避免重复敲命令。比如创建deploy.sh（Linux/macOS）：

#!/bin/bash

# 1. 保存源码到master分支
echo "=== 保存源码到master分支 ==="
git checkout master
git add .
read -p "请输入master分支的提交信息: " master_msg
git commit -m "$master_msg"
git push origin master

# 2. 构建并发布到SRC分支
echo "=== 构建并发布到SRC分支 ==="
git checkout --orphan SRC
git rm -rf .
ng build --prod
cp -r dist/* .
git add .
git commit -m "更新GitHub Pages构建结果: $(date +'%Y-%m-%d %H:%M:%S')"
# 强制推送（因为orphan分支没有历史，第一次推送可能需要-f）
git push -f origin SRC

# 3. 切回master分支
git checkout master
echo "=== 发布完成，已回到master分支 ==="

给脚本添加执行权限：

chmod +x deploy.sh

之后每次发布只需要运行：

./deploy.sh

最后一步：配置GitHub Pages #

登录GitHub仓库，进入「Settings」→「Pages」，在「Source」选项里选择SRC分支，保存后等待GitHub自动部署即可。

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