需求
之前的文章已经记录过后端 API 实现获取 git 相关提交信息的方法了。这里介绍一个不用第三方插件，简单粗暴的一种前端 web 的实现方法。
原理
在前端 build 的时候，调用 git 的命令，获取所需要的信息。 比如分支，提交时间，提交记录信息等等等。
然后把信息输出到一个 html 文件中，并保存到根目录或者其他地方，比如 public/info.html 。这里注意这个文件在 build 的时候一定要打到target里面，不管是webpack 还是 其他工具，可以配置的。
然后直接通过http://domain/info.html 访问就可以了。
实现
首先写好 git 提取信息输出 html 的脚本，比如 gitInfo.sh
#!/bin/bash
echo "start build git info page..."
ROOT_PATH=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
cd $ROOT_PATH
echo "<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App Git Info</title>
</head>
<body>" > ./public/info.html
echo "build branch: `git rev-parse --abbrev-ref HEAD`" >> ./public/info.html
echo "<br/>" >> ./public/info.html
echo "build time: `date "+%Y-%m-%d %H:%M:%S"`" >> ./public/info.html
echo "<br/>" >> ./public/info.html
echo "last commit message: `git log --format=%B -n 1`" >> ./public/info.html
echo "<br/>" >> ./public/info.html
echo "last commit time: `git log --format=%cd -n 1`" >> ./public/info.html
echo "</body>
</html>" >> ./public/info.html
echo "git info page build successfully!"
这里我测试用的是 jenkins 执行 npm build， 所以在 jenkins 里面添加执行脚本的命令
sh ''' chmod +x gitInfo.sh sh gitInfo.sh npm run build '''
这样就会在 public 目录下生成 info.html了！
666