前端通过 shell 脚本执行打包后 git 代码自动提交

需求简介：前端项目实现打包后将生成的 dist 目录，自动复制到指定的 rel 文件夹目录下，并自动提交代码到仓库

解决方案一：通过手动复制文件夹，然后手动执行 git 提交操作(本文忽略)

解决方案2：使用插件及 shell 脚本自动提交代码(本文内容)

根据解决方案二实现过程如下

• 依赖插件：copy 插件通过 yarn add copy --save-dev 安装，实现复制 dist 文件夹到指定目录
• 依赖 shell：通过 shell 脚本将代码自动暂存提交
• 注：shell 文件在mac os中需要设置执行权限，因此我们通过 nodejs 文件进行生成，设置fs.writeFileSync('./codepush.sh', data, {mode: 0o0755})，同时在 package.json 文件配置 prepare: "node 执行生成 codepush.sh 的文件"

具体代码如下

1、通过 generatesh.js 文件生成 codepush.sh 文件

// generatesh.js
const fs = require('fs')

const data = 
`#!/bin/sh

read -p "请确认是否提交代码 y/n ? :" isPush

if test $isPush = "y"
then
    branch=$(git symbolic-ref --short -q HEAD)
    read -p "请输入代码提交备注内容:" content
    git add -A
    git commit -m"$content"

    exitCode="$?"

    if [ $exitCode == 0 ]
    then
        git push --set-upstream origin $branch
    else
        read -p "请先处理报错 exited with code $exitCode (error), ctrl+c 退出:"
    fi
else
    exit 0
fi

exit $?
`

fs.writeFileSync('./codepush.sh', data, {mode: 0o0755})

2、在 package.json 文件配置 scripts 的 prepare 命令，用来自动执行 generatesh.js 文件生成 codepush.sh 文件

注：如果使用 npm ， windows 会自动调用 git bash 运行 shell 文件，通过 codepush.sh 命令运行
windows 对应运行方式为 codepush.sh
windows 不支持 ./codepush.sh 的方式，与 mac 不统一
使用 yarn 不会产生这个问题，统一使用 ./codepush.sh 的方式运行 推荐项目使用 yarn，命令比较一致

// package.js.json
{
    ...
    
    "scripts": {
        "prepare": "node generatesh.js",
        "pubwin": "npm run build && node copy.js && codepush.sh", // 兼容 win 命令
        "pubmac": "npm run build && node copy.js && ./codepush.sh" // 兼容 mac 命令
        "pub": "yarn pubmac" // 使用 yarn 的统一命令
    }
    
    ...
}

3、通过 copy 将生成的 dist 目录代码自动复制到 rel 目录

// copy.js
const copy = require('copy')
const path = require('path')

copy(path.resolve(__dirname, 'dist/**'), path.resolve(__dirname, 'rel'), function (err, files) {
    if (err) {
        console.err('文件复制失败:', err)
    } else {
        console.log('文件复制成功，待上传')
    }
})

完结：通过以上方式，即可实现代码自动打包提交，节省文件复制，代码提交的时间