Працюємо з git-гілками в WebStorm

11.1 Гілки в гіт

Робота з гілками branches в Git — це один із ключових аспектів управління версіями, який дозволяє паралельно вести декілька ліній розробки в одному репозиторії. Гілкування робить Git потужним інструментом для співпраці, експериментів і управління різними версіями проєкту.

Ви можете думати про гілки в git як про папки, куди git копіює ваш проєкт. У вас є основна папка вашого проєкту у вашому локальному репозиторії — main, і git може створити копії цієї папки, щоб ви в них спробували з чимось поекспериментувати та не зламали основний, добре працюючий код. Такі папки-копії називають гілками — branches.

Гілки — це альтернативні варіанти коду. Допустимо, ви хочете щось переробити у великому проєкті, провести експеримент, у якому ви не до кінця впевнені. Як би ви зробили це без git?

Можна було б скопіювати проєкт у нову папку і спробувати все у ній змінити. Якщо результат вам сподобається, то можна скопіювати його в основну папку. Якщо ні — забути про неї, ну або взагалі видалити.

Або давайте візьмемо приклад із життя. Скажімо, написання книги:

1. У вас є рукопис книги (основна гілка).
2. Ви хочете спробувати змінити кінцівку (створення нової гілки).
3. Ви пишете нову кінцівку в окремому документі (робота в новій гілці).
4. Якщо нова кінцівка краще, ви замінюєте стару в рукописі (злиття гілок).
5. Видаляєте окремий документ із новою кінцівкою (видалення гілки).

11.2 Створення гілок

Створити гілку в WebStorm дуже просто:

Введіть ім'я гілки:

WebStorm одразу ж відобразить ім'я вашої поточної гілки зверху в меню:

А що там було до цього?

Там було ім'я вашої першої і основної гілки — main.

Тепер там відображається test, а це означає, що Git (під керівництвом WebStorm) не лише створив нову гілку, але й одразу переключився на неї.

Давайте в файл main.html у поточній гілці test додамо якийсь код і зафіксуємо його commit:

11.3 Перемикання між гілками

Крок 1. Обираємо гілку.

Тепер давайте перемкнемось на нашу стару гілку. Натиснемо на верхнє меню, і що ми там бачимо?

Не лякайтесь — тут усе просто:

Local — це список гілок вашого локального git-репозиторію. Тут їх дві:

• test
• main

Remote — це ваш віддалений репозиторій, який знаходиться на сервері GitHub. Ми туди пушили ваші зміни, але нової гілки там нема, що логічно. Віддалений репозиторій носить ім'я origin, і в ньому є лише гілка main.

Recent — це просто список назв останніх гілок, з якими ви працювали: цей пункт WebStorm додає для зручності та швидкості.

Назва origin/main справа від назви локального репозиторію — це назва віддаленого репозиторію, з яким він зараз синхронізований, і куди будуть пушитися зміни.

Крок 2. Завантажуємо код гілки в поточну папку.

Крок 3. Перевіряємо.

У мене відображається гілка main і старий код:

11.4 Злиття гілок

Давайте тепер спробуємо об'єднати код з наших двох гілок.

Крок 1. Для початку давайте додамо у наш проєкт ще один файл — index.html і напишемо в ньому якийсь код:

• Створюємо файл index.html
• Пишемо в ньому код <h1>Hello</h1>
• Фіксуємо файл

Ось як виглядають два моїх файли в гілці main:

Крок 2. Злиття гілок.

Додамо в нашу поточну гілку main зміни, які були зроблені у гілці test.

Для цього також скористаємось верхнім меню і командою Merge ‘test’ into ‘main’:

Крок 3. Перевіряємо результат.

Перевіряємо:

• Зверху як і раніше відображається гілка main
• Файлів у нас 2: index.html і main.html
• Файл main.html містить код, який був доданий у гілці test

11.5 Конфлікти при злитті

Іноді при злитті гілок бувають конфлікти.

Якщо ви внесете зміни в один файл у різних гілках і спробуєте їх об'єднати, то може виникнути конфлікт.

Конфлікт текстових файлів

Git — це дуже розумна система — вона розуміє типи файлів. Якщо ви внесете зміни в різні місця файлів, які вона вважає текстовими, вона просто перенесе зміни з одного файлу в інший у потрібне місце (так, як би це зробила людина).

Конфлікт бінарних файлів

Але якщо ви зміните десь картинку чи документ, Git не буде намагатися об'єднати їх частини в один: він просто запропонує вам вибрати, яку версію файлу ви хочете залишити в поточній гілці.

Ручне вирішення конфліктів

Якщо ви внесете зміни в одне і те ж місце текстового файлу, то Git не зможе правильно об'єднати різні версії і запропонує це зробити вам:

Ось як це може виглядати:

Що ви тут бачите:

• Зліва — вміст файлу main.html гілки main
• Справа — вміст файлу main.html гілки test
• У середині WebStorm пропонує вам написати фінальну версію коду (можна натиснути на кнопки >> і <<, щоб автоматично вставити зміни з якогось файлу)

Я прийняв варіант main і дописав код власноруч. Ось що у мене вийшло:

11.6 Історія змін

Ще з корисного та цікавого. Ви можете переглянути історію змін будь-якого файлу, натиснувши на кнопку Show History. Є два місця, де вона може знаходитися. Знайдіть її.

Ось як виглядає історія змін у мене для файлу main.html:

Пояснення:

• Зліва ви бачите історію змін конкретного файлу:
  • Чим зміна новіша, тим вона вище, чим старіше – тим нижче
  • Також тут відображається історія злиття гілок
• Справа — зміни, які були внесені у конкретному коміті