Git 基本工作流：添加与提交

简介

在上一课中,我们了解了 Git 的基本概念。现在,让我们动手学习 Git 最重要的两个命令:git add 和 git commit。

这两个命令构成了 Git 日常使用的核心工作流。

Git 的基本工作流程

每次你修改代码后,都会经历这个流程:

1. 修改文件 (在工作区)
   ↓
2. git add (添加到暂存区)
   ↓
3. git commit (提交到本地仓库)
   ↓
4. git push (推送到远程仓库)

今天我们重点学习步骤 2 和 3。

git status - 查看状态

在进行任何操作前,先学习最有用的命令:git status。

使用方法

git status

这个命令会告诉你:

• 哪些文件被修改了
• 哪些文件在暂存区
• 哪些文件未被追踪
• 当前所在的分支

示例输出

On branch main
Changes not staged for commit:
  modified:   index.html

Untracked files:
  style.css

no changes added to commit

解读:

• index.html 被修改了,但还没添加到暂存区
• style.css 是新文件,Git 还没追踪它

💡 小贴士: 随时使用 git status 查看当前状态,这是个好习惯!

git add - 添加到暂存区

git add 命令将修改的文件添加到暂存区,准备提交。

基本用法

1. 添加单个文件

git add index.html

2. 添加多个文件

git add index.html style.css script.js

3. 添加所有文件

git add .

. 表示当前目录下的所有文件

4. 添加某个目录

git add src/

实际示例

假设你修改了 3 个文件:

$ git status
modified:   index.html
modified:   style.css
modified:   script.js

场景 1: 只想提交 HTML 的修改

git add index.html

场景 2: 提交所有修改

git add .

暂存区的作用

为什么需要暂存区? 直接提交不行吗?

暂存区让你可以:

1. 选择性提交: 只提交部分修改
2. 组织提交: 将相关修改组织在一起
3. 检查修改: 提交前再次确认

例子:

你同时修改了两个功能:

• feature1.js - 新功能
• bugfix.js - Bug 修复

你可以分别提交:

# 先提交 bug 修复
git add bugfix.js
git commit -m "修复登录 bug"

# 再提交新功能
git add feature1.js
git commit -m "添加搜索功能"

这样提交历史更清晰!

git commit - 提交更改

git commit 将暂存区的内容正式保存到仓库。

基本用法

git commit -m "提交说明"

-m 参数后面是提交信息,简短描述这次修改了什么。

提交信息的写法

✅ 好的提交信息

git commit -m "添加用户登录功能"
git commit -m "修复购物车价格计算错误"
git commit -m "更新 README 文档"
git commit -m "优化图片加载性能"

特点:

• 简洁明了
• 动词开头
• 说明做了什么

❌ 不好的提交信息

git commit -m "update"           # 太模糊
git commit -m "asdf"              # 无意义
git commit -m "修改了一些东西"    # 不具体
git commit -m "。。。"            # 敷衍

提交信息模板

推荐使用这些动词开头:

• 添加 / Add: 新增功能
• 修复 / Fix: 修复 bug
• 更新 / Update: 更新功能
• 重构 / Refactor: 重构代码
• 删除 / Remove: 删除功能
• 优化 / Optimize: 性能优化
• 文档 / Docs: 文档更新

完整的提交流程

让我们通过一个完整的例子来理解:

步骤 1: 修改文件

# 编辑 index.html
# 保存文件

步骤 2: 查看状态

$ git status
Changes not staged for commit:
  modified:   index.html

步骤 3: 添加到暂存区

git add index.html

步骤 4: 再次查看状态

$ git status
Changes to be committed:
  modified:   index.html

注意状态变成了 "Changes to be committed"

步骤 5: 提交

git commit -m "更新首页标题"

步骤 6: 确认提交成功

$ git status
nothing to commit, working tree clean

表示所有修改都已提交!

实战演练

让我们通过一个真实场景练习:

场景: 开发个人网站

1. 创建新文件

# 创建 HTML 文件
echo "<h1>我的网站</h1>" > index.html

# 查看状态
git status
# 输出: Untracked files: index.html

2. 添加并提交

git add index.html
git commit -m "创建首页"

3. 修改文件

# 添加更多内容
echo "<p>欢迎来到我的网站</p>" >> index.html

# 查看状态
git status
# 输出: modified: index.html

4. 再次提交

git add index.html
git commit -m "添加欢迎文字"

5. 创建 CSS 文件

echo "body { background: #f0f0f0; }" > style.css

6. 同时提交两个文件

# 修改 HTML 引入 CSS
echo '<link rel="stylesheet" href="style.css">' >> index.html

# 添加所有修改
git add .

# 提交
git commit -m "添加样式表"

常用技巧

1. 快捷提交

如果你想直接提交所有已追踪文件的修改:

git commit -am "提交说明"

-a = 自动 add 所有已追踪的文件 -m = 提交信息

⚠️ 注意: 这只对已追踪的文件有效,新文件还是要手动 git add

2. 查看提交历史

git log

输出:

commit a1b2c3d4...
Author: Your Name <your@email.com>
Date:   Mon Jan 1 12:00:00 2024

    添加样式表

commit e5f6g7h8...
Author: Your Name <your@email.com>
Date:   Mon Jan 1 11:30:00 2024

    添加欢迎文字

3. 简洁的历史记录

git log --oneline

输出:

a1b2c3d 添加样式表
e5f6g7h 添加欢迎文字
i9j0k1l 创建首页

4. 查看具体修改

查看工作区的修改:

git diff

查看暂存区的修改:

git diff --staged

常见错误与解决

错误 1: 忘记添加文件就提交

$ git commit -m "添加新功能"
nothing to commit, working tree clean

解决: 先 git add 再 git commit

错误 2: 提交信息写错了

# 修改最后一次提交的信息
git commit --amend -m "正确的提交信息"

⚠️ 警告: 只能修改最后一次提交!

错误 3: 添加了不该添加的文件

# 从暂存区移除
git reset HEAD 文件名

文件回到工作区,没有被删除

最佳实践

1. 频繁提交

❌ 一天结束时提交所有修改

git commit -m "今天的工作"  # 太宽泛

✅ 每完成一个小功能就提交

git commit -m "添加登录按钮"
git commit -m "实现登录验证逻辑"
git commit -m "添加错误提示信息"

2. 原子性提交

每次提交应该:

• 只做一件事
• 可以独立理解
• 可以单独回退

3. 提交前检查

养成习惯:

git status          # 查看状态
git diff            # 查看修改
git add .           # 添加文件
git status          # 再次确认
git commit -m "..." # 提交

4. 不要提交这些

创建 .gitignore 文件,排除:

# 依赖
node_modules/

# 构建产物
dist/
build/

# 系统文件
.DS_Store
Thumbs.db

# 环境变量
.env

# IDE 配置
.vscode/
.idea/

练习题

练习 1: 基础工作流

1. 创建一个新文件 about.html
2. 添加到暂存区
3. 提交,信息为 "创建关于页面"
4. 修改这个文件
5. 再次提交,信息为 "完善关于页面内容"

练习 2: 选择性提交

1. 同时修改 3 个文件
2. 只提交其中 2 个
3. 查看状态,确认还有 1 个未提交

练习 3: 查看历史

1. 进行 3 次提交
2. 使用 git log 查看历史
3. 使用 git log --oneline 查看简洁版

小结

今天我们学习了 Git 的核心工作流:

• git status - 随时查看状态
• git add - 添加文件到暂存区
  • git add 文件名 - 添加单个文件
  • git add . - 添加所有文件
• git commit -m "说明" - 提交更改
  • 提交信息要清晰明确
  • 频繁提交小改动
• git log - 查看提交历史

这三个命令构成了日常使用 Git 90% 的工作流程!

下一步

现在你已经掌握了基础工作流,接下来学习:

1. 分支管理 - Git 最强大的功能
2. 远程仓库 - 与 GitHub 协作
3. 撤销操作 - 如何回退修改

继续加油! 💪