美文网首页
Vue企业级优雅实战-02-提交 GIT 平台

Vue企业级优雅实战-02-提交 GIT 平台

作者: 程序员搞艺术 | 来源:发表于2020-08-25 11:24 被阅读0次

    代码管理、版本管理是件老大难的事情,尤其多人开发中的代码冲突、突击功能时面临的 hotfix 等。本文只是简单说说如何将一套代码提交到两个 Git 平台(GitHub、GitEE)上。其他的 Git 操作:如本地 commit、远程 push、pull、开启新分支、分支合并等操作,再后面的文章中都会有操作 —— 每一个功能点我都会开启一个新分支。

    1 初始化本地 Git 仓库

    1.1 初始化仓库

    将本地一个目录初始化为本地 git 仓库的命令是:

    git init
    

    由于咱的工程是通过 vue-cli 创建的,默认已经初始化本地 git 仓库了,故不需要执行上述命令。

    1.2 查看状态

    在 webstorm 中打开底部的 Termial 窗口,默认会进入到当前工程根路径的命令行中,输入下列命令查看当前代码的状态:

    git status
    

    显示如下内容:

    MacBook-Pro dscloudy-admin-single % git status
    On branch master
    Untracked files:
      (use "git add <file>..." to include in what will be committed)
            src/modules/
    
    nothing added to commit but untracked files present (use "git add" to track)
    

    提示 src/modules/ 没有纳入到 git 的版本管理中。(虽然咱们新创建了很多目录,但里面没有文件,故 git 是不会提示的,只有当里面有文件时,才会检测)。

    1.3 添加文件

    按照上面的提示,将 src/modules/ 添加到 Git 版本管理中:

    git add src/modules/
    

    说明:如果上面提示的内容都全部需要添加到提交列表中,则可以使用 . 匹配全部:

    git add .
    

    此时再执行 git status, 会发现 上面的提示变成 黄色的。如果还是红色,也许你 add 后面的路径有错误。

    1.4 提交文件

    上面的操作已经将新文件或有改动的文件,添加到待提交的列表中,接下来便是将改动提交到本地仓库:

    git commit -m '初始化工程'
    

    此时再次执行 git status, 会显示:

    MacBook-Pro dscloudy-admin-single % git status
    On branch master
    nothing to commit, working tree clean
    

    git 提交建议遵循业内规范,随着项目增大、提交数越来越多,git commit message 可以提供很多历史信息、便于快速查找,我个人偏好 Angular 的规范,推荐使用工具 commitizen 规范提交信息的格式。同时还可以借助 conventional-changelog 生成 Change Log。

    1.5 安装使用 commitizen

    commitizen的运行基于 Node JS,在命令行中全局安装:

    npm install -g commitizen
    

    显示如下信息,则说明安装成功:

    MacBook-Pro ~ % npm install -g commitizen
    /usr/local/bin/git-cz -> /usr/local/lib/node_modules/commitizen/bin/git-cz
    /usr/local/bin/cz -> /usr/local/lib/node_modules/commitizen/bin/git-cz
    /usr/local/bin/commitizen -> /usr/local/lib/node_modules/commitizen/bin/commitizen
    + commitizen@4.2.0
    added 1 package from 1 contributor, removed 1 package and updated 9 packages in 145.447s
    

    安装好该工具后,需要在命令行中进入工程的根目录,执行下面语句,使工程支持 Angular 的Commit Message 格式:

    commitizen init cz-conventional-changelog --save --save-exact
    

    咱这工程以后提交代码,就不再使用 git commit -m 'xxx' 来提交代码了,改为使用 git cz 命令。

    由于刚才执行命令使工程支持 commitizen,故自动修改了 package.json 文件。执行 git status , 会看到:

    -MacBook-Pro dscloudy-admin-single % git status
    On branch master
    Changes not staged for commit:
      (use "git add <file>..." to update what will be committed)
      (use "git restore <file>..." to discard changes in working directory)
            modified:   package-lock.json
            modified:   package.json
    
    no changes added to commit (use "git add" and/or "git commit -a")
    

    咱就提交这个改动尝试 commitizen。 首先还是执行 git add . , 接着执行:

    git cz
    

    提示:

    -MacBook-Pro dscloudy-admin-single % git cz
    cz-cli@4.2.0, cz-conventional-changelog@3.2.1
    
    ? Select the type of change that you're committing: (Use arrow keys)
    ❯ feat:     A new feature 
      fix:      A bug fix 
      docs:     Documentation only changes 
      style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 
      refactor: A code change that neither fixes a bug nor adds a feature 
      perf:     A code change that improves performance 
      test:     Adding missing tests or correcting existing tests 
    (Move up and down to reveal more choices)
    

    这里出现了几个选项,这些选项分别代表不同的提交类型: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert:

    feat: feature, 新功能
    fix: 修复 bug
    docs: 修改了文档
    style: 格式,不影响代码运行的改动(空格、格式化、分号等)
    refactor: 重构代码
    perf: 性能优化的改动
    test: 增加测试
    build: 影响构建或外部依赖
    chore: 辅助工具的变动,不包括源码和测试文件(如 ESLint 的配置等)
    revert: 回到以前提交
    

    刚才咱们的改动影响 package.json, 属于 build 类型,选择 build,回车后提示:

    ? What is the scope of this change (e.g. component or file name): (press enter to skip) 
    

    改动影响的范围,直接回车即可。接下来提示输入改动的简短描述:

    ? Write a short, imperative tense description of the change (max 93 chars):
    

    简要描述本次提交的改动即可,我这里输入:添加 commitizen 的支持。回车后,会依次让输入 详细描述、选择是否是 breaking changes、是否影响未关闭的 issues, 全部都直接回车即可。最后会提示:

    [master 491531b] build: 添加 commitizen 的支持
     2 files changed, 547 insertions(+)
    

    这样就完成了git cz 代码提交。关于生成 Change Log,后面遇到在写。接下来需要分别推送到远程仓库。

    2 生成 SSH-Key

    我们需要把代码分别推送到 GitHub 和 Gitee,由于两个平台对应两个 git 账号,故需要分别生成两个 SSH-Key。

    1、 生成 gitee 的 SSH-Key:

    ssh-keygen -t rsa -C '你的邮箱' -f ~/.ssh/dscloudy_gitee_id_rsa
    

    执行该命令时会提示 Enter passphrase, 直接回车即可。

    2、同样的方式生成 github 的 SSH-Key

    ssh-keygen -t rsa -C '你的邮箱' -f ~/.ssh/dscloudy_github_id_rsa
    

    3、查看生成的文件列表

    ls -la ~/.ssh
    
    image-20200825104704042

    4、配置 config 文件

    ~/.ssh 目录下会有一个 config 文件,如果没有就新建一个,里面内容如下:

    # gitee
    Host gitee.com
    HostName gitee.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/dscloudy_gitee_id_rsa
    # github
    Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/dscloudy_github_id_rsa
    

    3 推送到 Gitee

    3.1 创建仓库

    Gitee 地址:https://gitee.com

    如果没有账号,先创建账号,登录。 点击页面右上角+ 创建新仓库

    新建仓库

    3.2 设置密钥

    设置公钥

    在命令行中输入命令查看公钥:

    cat ~/.ssh/dscloudy_gitee_id_rsa.pub
    

    将显示的内容复制到上面的文本框中,点击确定。

    image-20200825105303789

    输入密码后点击验证按钮。 验证通过后,在命令行中输入命令判断是否配置成功:

    ssh -T git@gitee.com
    

    回车后会看到如下提示:

    Are you sure you want to continue connecting (yes/no/[fingerprint])? 
    

    一定要手动输入 yes, 再回车,会提示:

    Hi dscloudy! You've successfully authenticated, but GITEE.COM does not provide shell access.
    

    看到 successfully 的字眼,说明配置成功。

    3.3 推送代码

    在命令行中回到工程的根路径,输入如下命令添加到远程仓库:

    git remote add gitee_origin git@gitee.com:cloudyly/dscloudy-admin-single.git
    

    推送到远程仓库:

    git push -u gitee_origin master
    

    推送成功后,在网页上面便可以看到这个工程了。

    4 推送到 GitHub

    4.1 创建仓库

    GitHub 地址:https://github.com

    如果没有账号,先创建账号,登录。 点击页面右上角+ 创建新仓库。

    github新建仓库

    4.2 设置密钥

    设置SSH-Key

    进入该页面后,点击 'New SSH Key'。在命令行中查看之前生成的 GitHub的 SSH-Key:

    cat ~/.ssh/dscloudy_github_id_rsa.pub
    

    将结果复制到输入框中。点击确定后,会让输入 github 的密码,验证通过后便添加完成。在命令行中输入命令判断是否配置成功:

    ssh -T git@github.com
    

    回车后会看到提示仍然输入“yes”,最后出现 successfully authenticated便配置成功。

    4.3 推送代码

    在命令行中回到工程的根路径,输入如下命令添加到远程仓库:

    git remote add github_origin git@github.com:cloudyly/dscloudy-admin-single.git
    

    推送到远程仓库:

    git push -u github_origin master
    

    推送成功后,在网页上面便可以看到这个工程了。

    至此,咱们完成了多个 SSH-Key 的配置,一级一套代码关联两个远端仓库的操作。其他操作将会贯穿到后面的实战中。


    欢迎关注我的个人公众号,留言可加我个人微信或交流问题


    程序员搞艺术

    相关文章

      网友评论

          本文标题:Vue企业级优雅实战-02-提交 GIT 平台

          本文链接:https://www.haomeiwen.com/subject/iaiajktx.html