如何通过Travis将版本发布到gh-pages且不删除旧版本

嘿，这个需求我刚好折腾过类似的场景，结合你已经做的配置（yarn+webpack生成tag专属目录和latest目录），给你一套能实现「Git历史保留+旧版本目录不删除」的完整方案：

• 确保部署工具的增量提交配置
  不管你用的是gh-pages npm包还是GitHub Actions里的部署工具，核心要避免它覆盖整个gh-pages分支。比如用官方的gh-pages包时，别用默认的覆盖模式，加上--add参数来增量提交新内容：

  gh-pages --dist dist --add
  

  如果用GitHub Actions（比如peaceiris/actions-gh-pages），一定要把keep_files: true配置加上，这样它只会更新新增/修改的文件，不会删除旧的tag目录：

  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./dist
      keep_files: true # 关键配置，保留旧文件
  

• 固化构建时的tag目录生成逻辑
  你已经在webpack里配置了输出到tag目录和latest目录，这里要确保tag名称能正确传递给webpack。可以在构建命令里通过环境变量注入当前tag：

  TAG_NAME=$(git describe --tags --abbrev=0) yarn build
  

  然后在webpack配置里读取这个环境变量：

  const tagName = process.env.TAG_NAME || 'latest';
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    output: {
      path: path.resolve(__dirname, `dist/${tagName}`),
      // 其他输出配置
    },
    plugins: [
      // 把当前tag的构建文件同步复制到latest目录
      new CopyWebpackPlugin({
        patterns: [
          { from: path.resolve(__dirname, `dist/${tagName}`), to: path.resolve(__dirname, 'dist/latest') }
        ]
      })
    ]
  };
  

  这样每次打tag构建时，都会在dist下生成对应tag的目录，同时更新latest目录的内容，旧的tag目录不会被本地清理。

• 维护gh-pages分支的完整文件结构
  部署时一定要把整个dist目录推到gh-pages分支，而不是只推某个子目录。因为dist里已经包含了所有历史tag目录和最新的latest目录，这样每次部署只是新增/更新对应的tag目录和latest目录，旧的目录会一直留在gh-pages分支里，Git历史也会因为keep-history/keep_files的配置而完整保留。

• 额外优化：自动生成版本索引
  为了方便用户找到旧版本，可以在构建脚本里自动生成一个versions.json文件，放在dist目录下。比如用Node脚本读取所有git tag，生成包含版本号和对应路径的JSON：

  // scripts/generate-versions.js
  const fs = require('fs');
  const { execSync } = require('child_process');
  
  const tags = execSync('git tag --list').toString().trim().split('\n');
  const versions = tags.map(tag => ({
    version: tag,
    url: `/${tag}/`
  })).reverse(); // 按版本从新到旧排序
  
  fs.writeFileSync('./dist/versions.json', JSON.stringify(versions, null, 2));
  

  然后在构建命令里加上这个脚本：TAG_NAME=xxx yarn build && node scripts/generate-versions.js，这样部署后用户就能通过访问/versions.json获取所有可用版本的链接了。

只要按照上面的步骤配置，你的gh-pages分支就能同时保留完整的Git历史，以及所有旧版本的专属目录，latest目录也会始终指向最新版本。

内容的提问来源于stack exchange，提问作者Reto Gmür