Вторая ветка:
создать, переключиться, проверить

Категория

Ветки

Уровень

Начальный

Что получится

Две ветки с разными коммитами и умение переключаться между ними

Сколько занимает

Около тридцати минут за компьютером

§1Задача главы

В главе 3.1 на ветке main разобрано, что ветка — это имя, за которым записан один коммит, а в HEAD записано имя текущей ветки. В этой главе к main добавляется вторая ветка. Задача: добавить на страницу контактов форму обратной связи. Работа ведётся в отдельной ветке forma-kontaktov, чтобы незаконченная форма не попала в main.

В главе используется проект sait-vizitka в том виде, в каком он остался после главы 3.1: пятнадцать коммитов в ветке main, одиннадцать из них на GitHub не отправлены. Имена коммитов, сделанных вами, будут отличаться от показанных.

§2Шаг 1. Создать ветку

Ветка создаётся из списка веток, который открывался в главе 3.1.

Нажимаем на имя main в строке состояния и выбираем в списке Create new branch…

Вводим имя forma-kontaktov и нажимаем Enter:

То же в терминале. Ключ -c создаёт ветку, сама команда switch переходит на неё:

git switch -c forma-kontaktov
Switched to a new branch 'forma-kontaktov'

Что получилось.Создана ветка forma-kontaktov, вы стоите на ней. Файлы проекта не изменились.

§3Шаг 2. Проверить записи в папке .git

По главе 3.1 новая ветка — это новый файл в папке .git/refs/heads и новая запись в HEAD. Проверяем.

git branch
* forma-kontaktov
  main
ls .git/refs/heads
forma-kontaktov
main
cat .git/HEAD
ref: refs/heads/forma-kontaktov

Веток две, звёздочка стоит у forma-kontaktov. В папке два файла. В HEAD теперь записана новая ветка. Смотрим, на каких коммитах стоят ветки:

git branch -v
* forma-kontaktov 82fd14a Добавил дату обновления страницы
  main            82fd14a [ahead 11] Добавил дату обновления страницы

Обе ветки стоят на одном коммите 82fd14a. Пока ветки различаются только именем.

Что получилось.В .git/refs/heads два файла с одним и тем же коммитом, в HEAD записана ветка forma-kontaktov.

§4Шаг 3. Сделать коммит в новой ветке

Ветки начинают различаться после первого коммита. Делаем его в новой ветке.

В kontakty.html под ссылкой на профиль добавляем форму:

  <p><a href="https://github.com/MaximBytecamp">Профиль на GitHub</a></p>
</body>

  <p><a href="https://github.com/MaximBytecamp">Профиль на GitHub</a></p>
  <form>
    <input type="email" placeholder="Ваша почта">
    <textarea placeholder="Сообщение"></textarea>
    <button>Отправить</button>
  </form>
</body>

Сохраняем файл, отбираем его плюсом и делаем коммит с сообщением «Добавил форму обратной связи». То же в терминале:

git add kontakty.html
git commit -m "Добавил форму обратной связи"

Проверяем, на каких коммитах стоят ветки:

git branch -v
* forma-kontaktov a727fbf Добавил форму обратной связи
  main            82fd14a [ahead 11] Добавил дату обновления страницы

Ветка forma-kontaktov сдвинулась на новый коммит a727fbf. Ветка main осталась на 82fd14a: коммит сдвигает только ту ветку, которая записана в HEAD.

Что получилось.В ветке forma-kontaktov на один коммит больше, чем в main.

§5Шаг 4. Переключиться на main

Теперь переходим на ветку main и смотрим на тот же файл.

Нажимаем на имя ветки в строке состояния и выбираем в списке main. То же в терминале:

git switch main
Switched to branch 'main'
Your branch is ahead of 'origin/main' by 11 commits.
  (use "git push" to publish your local commits)

При переключении Git делает два действия:

Форма записана в коммите a727fbf ветки forma-kontaktov и вернётся в файл при переходе на эту ветку. Папка проекта одна, а её содержимое зависит от ветки, на которой вы стоите.

В графе коммита с формой сейчас нет: раздел GRAPH по умолчанию показывает только текущую ветку.

Что получилось.Вы стоите на main. В папке проекта файлы без формы.

§6Шаг 5. Сделать коммит в main

Пока форма не готова, в main делаем отдельное исправление: меняем заголовок главной страницы.

  <h1>Привет, это моя страница</h1>

  <h1>Привет, это мой сайт</h1>

Сохраняем файл, отбираем его плюсом и делаем коммит «Исправил заголовок главной страницы». То же в терминале:

git add index.html
git commit -m "Исправил заголовок главной страницы"

Теперь у каждой ветки есть коммит, которого нет в другой. Обе линии показывает команда git log с ключом --all:

git log --oneline --graph --all -4
* 69f9d13 Исправил заголовок главной страницы
| * a727fbf Добавил форму обратной связи
|/  
* 82fd14a Добавил дату обновления страницы
* cd66804 Revert "Увеличил отступы страницы"

Ключ --graph рисует линии слева. От коммита 82fd14a вверх идут две линии: на левой коммит ветки main, на правой — коммит ветки forma-kontaktov. Ниже 82fd14a история общая.

Что получилось.В main шестнадцать коммитов, на кнопке 12↑. Ветки разошлись: у каждой свой последний коммит.

§7Шаг 6. Показать обе ветки в графе

Раздел GRAPH можно переключить на показ всех веток.

В заголовке раздела GRAPH нажимаем на слово Auto. В списке отмечаем All и нажимаем OK:

Что получилось.В графе VS Code видны обе ветки и коммит, от которого они расходятся.

§8Шаг 7. Вернуться в ветку формы

Возвращаемся к работе над формой. Нажимаем на имя ветки в строке состояния и выбираем forma-kontaktov. То же в терминале:

git switch forma-kontaktov
Switched to branch 'forma-kontaktov'

Файлы в папке снова соответствуют ветке формы. Сравнение двух веток по файлам:

Исправление заголовка сделано в main, поэтому в ветке формы его нет. Коммиты одной ветки не попадают в другую. Объединение веток разобрано в главе 3.3.

Что получилось.Вы стоите на forma-kontaktov: в kontakty.html есть форма, в index.html прежний заголовок.

§9Шаг 8. Переключиться с незакоммиченной правкой

До сих пор перед каждым переключением список изменений был пуст. Проверим, что происходит с правкой, которая не закоммичена.

На ветке forma-kontaktov добавляем в конец styles.css отступ над формой и сохраняем файл. Коммит не делаем.

form {
  margin-top: 24px;
}

Переключаемся на main, из списка веток в строке состояния или командой:

git switch main
M	styles.css
Switched to branch 'main'
Your branch is ahead of 'origin/main' by 12 commits.
  (use "git push" to publish your local commits)
git status --short
 M styles.css

Переключение прошло, и правка осталась в файле. Первая строка ответа M styles.css сообщает об этом: изменённый файл перенесён на ветку main.

Незакоммиченная правка не записана ни в одной ветке. Она лежит в папке проекта. Файл styles.css в обеих ветках одинаковый, поэтому Git оставил его как есть. Если сейчас сделать коммит, отступ для формы попадёт в main, где формы нет.

Поэтому перед коммитом ветку проверяют по строке состояния. Возвращаемся в ветку формы и коммитим правку там:

git switch forma-kontaktov
M	styles.css
Switched to branch 'forma-kontaktov'
git add styles.css
git commit -m "Добавил отступ над формой"
[forma-kontaktov e3eeeb9] Добавил отступ над формой
 1 file changed, 4 insertions(+)

Что получилось.Правка в styles.css закоммичена в ветке forma-kontaktov, в которой находится форма.

§10Шаг 9. Получить отказ в переключении

Если изменённый файл в двух ветках разный, Git переключение отменяет. Воспроизведём этот случай.

На ветке forma-kontaktov меняем в kontakty.html надпись на кнопке и сохраняем файл. Коммит не делаем.

    <button>Отправить</button>

    <button>Написать</button>

Переключаемся на main командой:

git switch main
error: Your local changes to the following files would be overwritten by checkout:
	kontakty.html
Please commit your changes or stash them before you switch branches.
Aborting

Git сообщает: правки в kontakty.html будут перезаписаны при переключении, сначала сделайте коммит. Слово Aborting означает, что переключение отменено и вы остались на прежней ветке. Причина в том, что kontakty.html в двух ветках разный: в main формы нет. Чтобы привести файл к ветке main, Git должен был бы стереть вашу правку.

В VS Code то же действие, выбор main в списке веток, открывает окно с четырьмя кнопками:

Нажимаем Cancel. Правка относится к форме, поэтому коммитим её в текущей ветке:

git add kontakty.html
git commit -m "Переименовал кнопку формы"

Правило для обоих случаев: перед переключением делают коммит, список изменений должен быть пуст.

Что получилось.Список изменений пуст, вы стоите на forma-kontaktov. В main шестнадцать коммитов, в forma-kontaktov — восемнадцать: пятнадцать общих и три своих.

§11Справка: команды для веток

§12Частые вопросы

§13Проверьте себя

§14Шпаргалка по главе

Итог главы

Ветку создают из списка веток в строке состояния или командой git switch -c. Новая ветка стоит на том же коммите, что и текущая, файлы проекта при этом не меняются. Коммит сдвигает только ветку, записанную в HEAD, поэтому после первого коммита ветки расходятся. При переключении Git записывает в HEAD имя выбранной ветки и приводит файлы в папке к её последнему коммиту: форма есть в файле на ветке forma-kontaktov и отсутствует на main. Обе ветки показывает git log --oneline --graph --all и раздел GRAPH в режиме All. Незакоммиченная правка не записана ни в одной ветке: при переключении она переходит вместе с вами, а если файл в ветках разный, Git переключение отменяет. Поэтому перед переключением делают коммит. В следующей главе ветку forma-kontaktov объединяют с main.