Git и GitHub для front-end программистов

В последнее время все больше набирают популярность системы контроля версий. С их помощью можно полностью отследить жизненный цикл файла, посмотреть все внесенные изменения, сделать в любой момент копию проекта и продолжить работу параллельно. Их использование при разработке back-end’а стало уже практически обязательным. Но и для front-end’щиков Git может быть весьма полезен. А при разработке больших проектов вообще незаменим.

Ниже приведен пошаговый пример работы с git и github на базе Ubuntu 14.04

Установка Git локально:

Первым делом ставим систему контроля версий под названием Git.

sudo apt-get update
sudo apt-get install git

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

git config —global user.name «Your Name»
git config —global user.email «youremail@domain.com»

Указываем дефолтный редактор для вывода сообщений-коммитов. У меня это subl — Sublime Text

git config —global core.editor «subl -n -w»

Проверяем правильность внесенных данных

git config —list

Ну и регистрируемся на GitHub.

Основы Git

Git считает хранимые данные набором слепков небольшой файловой системы. Каждый раз, когда вы фиксируете текущую версию проекта, Git, по сути, сохраняет слепок того, как выглядят все файлы проекта на текущий момент. Ради эффективности, если файл не менялся, Git не сохраняет файл снова, а делает ссылку на ранее сохранённый файл.

1. Три состояния файла

В Git файлы могут находиться в одном из трёх состояний: зафиксированном, изменённом и подготовленном. «Зафиксированный» значит, что файл уже сохранён в вашей локальной базе. К изменённым относятся файлы, которые поменялись, но ещё не были зафиксированы. Подготовленные файлы — это изменённые файлы, отмеченные для включения в следующий коммит.

Таким образом, в проекте с использованием Git есть три части: каталог Git (Git directory), рабочий каталог (working directory) и область подготовленных файлов (staging area). Каталог Git — это место, где Git хранит метаданные и базу данных объектов вашего проекта. Это наиболее важная часть Git, и именно она копируется, когда вы клонируете репозиторий с другого компьютера.

Рабочий каталог — это извлечённая из базы копия определённой версии проекта. Эти файлы достаются из сжатой базы данных в каталоге Git и помещаются на диск для того, чтобы вы их просматривали и редактировали. Область подготовленных файлов — это обычный файл, обычно хранящийся в каталоге Git, который содержит информацию о том, что должно войти в следующий коммит.

    Стандартный рабочий процесс с использованием Git выглядит примерно так:

  1. Вы изменяете файлы в вашем рабочем каталоге.
  2. Вы подготавливаете файлы, добавляя их слепки в область подготовленных файлов.
  3. Вы делаете коммит. При этом слепки из области подготовленных файлов сохраняются в каталог Git.

2. Клонируем существующий репозиторий

Многие front-end программисты работают с HTML5 Boilerplate. Вот его и скопируем в наш localhost.

git clone https://github.com/h5bp/html5-boilerplate

Папка с названием html5-boilerplate должна появиться в корне localhost. Но у меня она появилась в корне «документов». Если нужен не бойлерплейт, а bootstrap можем и его скопировать. В общем, после того как определились на чем в этот раз будем делать сайт и скопировали себе всего и много, переходим к следующему пункту.

3. Добавляем новый репозиторий на GitHub

После того как перенесли папку с boilerplate в localhost, почистили ее, избавившись от лишнего и набросав основную разметку, идем в наш аккаунт GitHub.

Там выбираем «new repository».

 

Выбираем название для репозитория (в примере «test_project»), добавляем по желанию описание — description, и выбираем «public» (если вы на бесплатном аккаунте. Но учтите, все что public — все доступно другим людям). Т.к. мы добавляем наш существующий проект, нам не нужно его инициализировать отсюда.

 

Создав репозиторий, настало время его заполнить. Переходим в нашу папку с тестовым проектом и выполняем инициализацию:

cd /var/www/test_project
git init

Если вы хотите добавить под версионный контроль существующие файлы (в отличие от пустого каталога), вам стоит проиндексировать эти файлы и осуществить первую фиксацию изменений. Осуществить это вы можете с помощью нескольких команд git add указывающих индексируемые файлы. Нам надо проиндексировать все. Поэтому ставим «.»

git add .

Фиксируем наши первые изменения в Git:

git commit -m ‘My first commit’

На данном этапе, у вас есть репозиторий Git с добавленными файлами и начальным коммитом.

[master (root-commit) dbe5412] My first commit
3 files changed, 60 insertions(+)
create mode 100644 template_a.html
create mode 100644 template_b.html
create mode 100644 template_c.html

Настало время показать наш проект миру. Для этого добавим к себе наш удаленный репозиторий. В своем аккаунте вы всегда можете получить URL вашего текущего репозитория:

git remote add origin
git remote -v

Отправим наши локальные файлы на сервер GitHub:

git push -u origin master

Для этого нам придется представиться GitHub:

Username for ‘https://github.com’:
Password for ‘https://YourUsername@github.com’:
To https://LinkToYourProject:
* [new branch] master -> master
Branch master set up to track remote branch master from origin.

Если теперь зайти в свой аккаунт, то вы уведите все ваши файлы.

4. Изменение файлов локально и отправка их в GitHub

Основной инструмент, используемый для определения, какие файлы в каком состоянии находятся — это команда git status. Если вы выполните эту команду сразу после клонирования, вы увидите что-то вроде этого:

git status
# On branch master
nothing to commit (working directory clean)

Это означает, что у вас чистый рабочий каталог, другими словами — в нем нет отслеживаемых измененных файлов. Git также не обнаружил неотслеживаемых файлов, в противном случае они бы были перечислены здесь. И наконец, команда сообщает вам на какой ветке (branch) вы сейчас находитесь.

4.1 Добавление нового файла

Давайте добавим в нашу папку test_progect новый файл (template_d.html). После этого снова введем git status:

git status
# On branch master
# Untracked files:
# (use «git add …» to include in what will be committed)
#
# template_d.html
nothing added to commit but untracked files present (use «git add» to track)

Вы можете видеть, что новый файл template_d.html неотслеживаемый, т.к. он находится в секции «Untracked files» в выводе команды status. Неотслеживаемый файл обычно означает, что Git нашел файл, отсутствующий в предыдущем снимке состояния (коммите); Git не станет добавлять его в ваши коммиты, пока вы явно ему это не укажете. Это предохраняет вас от случайного добавления в репозиторий сгенерированных двоичных файлов или каких-либо других, которые вы и не думали добавлять. Мы хотим добавить этот файл, так что давайте сделаем это.:

git add template_d.html

Если вы снова выполните команду status, то увидите, что файл template_d.html теперь отслеживаемый и индексированный:

git status
# On branch master
# Changes to be committed:
# (use «git reset HEAD …» to unstage)
#
# new file: template_d.html
#

Если вы выполните коммит в этот момент, то версия файла, существовавшая на момент выполнения вами команды git add, будет добавлена в историю снимков состояния.:

git commit

Как только вы выполните эту команду, появится окошко с редактором который мы указывали в самом начале.
В нем будет вот такая запись:

# Please enter the commit message for your changes. Lines starting
# with ‘#’ will be ignored, and an empty message aborts the commit.
# On branch master
# Changes to be committed:
# (use «git reset HEAD …» to unstage)
#
# new file: template_d.html
#

Вы можете видеть, что комментарий по умолчанию для коммита содержит закомментированный результат работы («выхлоп») команды git status и ещё одну пустую строку сверху. Вы можете удалить эти комментарии и набрать ваше сообщение или же оставить их для напоминания того, что вы фиксируете. Если вы просто закроете окошко — то изменения отправятся с пустым комментарием.

После выхода их редактора, вы увидите:

[master 4afc9ca] new file: template_d.html
1 file changed, 20 insertions(+)
create mode 100644 template_d.html

Итак, вы создали свой первый коммит! Вы можете видеть, что коммит вывел вам немного информации о себе: на какую ветку вы выполнили коммит (master), какая контрольная сумма SHA-1 у этого коммита (4afc9ca), сколько файлов было изменено, а также статистику по добавленным/удаленным строкам в этом коммите.

Осталось сделать его доступным онлайн:

git push origin master

4.2 Редактирование существующего файла

Давайте отредактируем наш файл template_a.html в любом, удобном нам редакторе. Чтобы проверить его статус в репозитории, выполним:

git status
# On branch master
# Changes not staged for commit:
# (use «git add …» to update what will be committed)
# (use «git checkout — …» to discard changes in working directory)
#
# modified: template_a.html
#
no changes added to commit (use «git add» and/or «git commit -a»)

Как вы можете увидеть, модификация файла записана в событиях локального репозитория, но не зафиксирована в нем. Давайте зафиксируем:

git add template_a.html

Теперь файл зафиксирован и войдет в следующий коммит:

git commit
[master 4b9ae84] modified: template_a.html 1 file changed, 1 insertion(+), 1 deletion(-)

И отправим наши изменения на сервер GitHub:

git push origin master

4.3 Удаление существующего файла

Для того чтобы удалить файл из Git, вам необходимо удалить его из отслеживаемых файлов (точнее, удалить его из вашего индекса) а затем выполнить коммит. Это позволяет сделать команда git rm, которая также удаляет файл из вашего рабочего каталога, так что вы в следующий раз не увидите его как «неотслеживаемый». Если вы просто удалите файл из вашего рабочего каталога, он будет показан в секции «Changed but not updated» («Измененные но не обновленные» — читай не проиндексированные) вывода команды git status:

rm template_a.html

git status
# On branch master
#
# Changed but not updated:
#(use «git add/rm …» to update what will be committed)
#
#deleted: template_a.html
#

Затем, если вы выполните команду git rm, удаление файла попадёт в индекс:

git rm template_a.html
rm ‘template_a.html’
git status
# On branch master
#
# Changes to be committed:
#(use «git reset HEAD …» to unstage)
#
#deleted: template_a.html
#

После следующего коммита файл исчезнет и больше не будет отслеживаться. Если вы изменили файл и уже проиндексировали его, вы должны использовать принудительное удаление с помощью параметра -f. Это сделано для повышения безопасности, чтобы предотвратить ошибочное удаление данных, которые ещё не были записаны в снимок состояния и которые нельзя восстановить из Git.

Чтож, этого вполне достаточно для начала работы с Git.

При подготовке статьи был использован следующий материал:

  1. Git & GitHub for front-end Developers
  2. Учебник по Git Скотта Шакона, русский перевод