需求
之前的文章已经记录过后端 API 实现获取 git 相关提交信息的方法了。这里介绍一个不用第三方插件，简单粗暴的一种前端 web 的实现方法。
原理
在前端 build 的时候，调用 git 的命令，获取所需要的信息。 比如分支，提交时间，提交记录信息等等等。
然后把信息输出到一个 html 文件中，并保存到根目录或者其他地方，比如 public/info.html 。这里注意这个文件在 build 的时候一定要打到target里面，不管是webpack 还是 其他工具，可以配置的。
然后直接通过http://domain/info.html 访问就可以了。
实现
首先写好 git 提取信息输出 html 的脚本，比如 gitInfo.sh
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#!/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 里面添加执行脚本的命令
|
1 2 3 4 5 |
sh ''' chmod +x gitInfo.sh sh gitInfo.sh npm run build ''' |
这样就会在 public 目录下生成 info.html了！
666