Git — это система контроля версий. На момент написания этой статьи она является наиболее распространенной среди разработчиков. С помощью Git вы можете отслеживать изменения, внесенные в ваши файлы, просматривать всю историю и возвращаться к определенным изменениям, если что-то пошло не так. Он также отлично подходит для совместной работы с другими пользователями.
Давайте погрузимся в работу.
Сначала настройте свой Git
Для этого упражнения мы создадим простую форму на HTML, а затем немного оформим ее с помощью CSS. Затем, используя Git, мы сохраним версии файлов.
Создадим папку на рабочем столе и назовем ее simple-form.
После этого запустим наш терминал и сменим директорию на эту новую папку.
cd Desktop/simple-form/
(Вы должны указать путь, по которому вы создали папку).
Затем мы запустим Git. Это будет наша первая команда Git. Мы выполним эту конкретную команду только один раз, чтобы инициализировать Git для этой папки (и всех вложенных папок и файлов).
git init
Мы видим сообщение «Initialized empty Git repository in…», что является ожидаемым ответом.
Ваш первый коммит, отслеживание файлов
Откроем VSCode и начнем создавать файлы. Если вы используете его впервые, вы увидите экран приветствия.
Нажмем на «Добавить папку» и выберем папку «simple-form».
Когда папка будет открыта, мы можем создать новый файл и назвать его index.html. Затем создадим еще один файл и назовем его style.css. Сначала мы зафиксируем эти пустые файлы, чтобы начать отслеживать их в Git. После этого мы начнем кодировать и отслеживать эти изменения.
Команды, которые мы будем использовать, следующие:
- git status
- git add
- git commit
- git log
статус git
В терминале выполним команду:
git status
Мы видим ответ с довольно полезной информацией:
Начнем с «No commits yet». Это означает, что мы еще не отследили ни один из файлов. На это уже указывает следующее сообщение. «Untracked files» с некоторыми именами файлов, выделенными красным цветом. Это означает, что Git не имеет представления о том, что происходит в этих файлах.
И наконец, сообщение «Ничего не добавлено в коммит, но присутствуют неотслеживаемые файлы (используйте «git add» для отслеживания)». Именно это мы и собираемся сделать.
git add
git add .
Эта команда не дает никакого ответа, что хорошо.
Эта команда git add добавляет указанные файлы в область сцены. Точка является ярлыком для всех файлов. Вы можете указать имена файлов, которые хотите добавить, например, git add index.html или, если вы хотите добавить все файлы вместе, вы можете использовать точку, как мы сделали.
Что означает добавление файлов на стадию? Это означает, что эти файлы готовы к фиксации. Git может отслеживать изменения, только если файлы зафиксированы. Чтобы иметь возможность зафиксировать файлы, нам нужно добавить их в stage с помощью git add.
git commit
Последний шаг — использование команды git commit. Эта команда обычно используется с сообщением, в котором вы можете указать, что произошло изменение с кратким описанием. В нашем примере мы только что создали наши файлы. Поэтому мы можем просто выполнить команду с сообщением «create html and css files».
git commit -m "create html and css files"
Мое сообщение — это то, что находится внутри кавычек. Это сообщение будет связано с коммитом, чтобы я мог легко найти его, если понадобится позже. Это человекочитаемый текст, который должен кратко рассказать вам о том, что вы сделали в этом коммите.
Мы фактически закончили с тем, что Git отслеживает наши файлы и изменения. Каждый раз, когда мы вносим изменения, мы будем выполнять те же шаги и обновлять наши новые изменения. Так что давайте кодировать некоторые реальные вещи и отслеживать эти изменения.
Начнем кодировать форму
Давайте добавим шаблон формы в файл index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Мы можем изменить заголовок документа на Simple Form.
<head>
...
<title>Simple Form</title>
</head>
Затем мы начнем создавать форму.
<body>
<form>
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<button type="submit">Submit</button>
</form>
</body>
Пока это будет простая форма, которая запрашивает имя, фамилию и email с кнопкой отправки. У вас должен быть подобный сайт.
Давайте начнем с простой стилизации. Но прежде, в индексном файле, давайте подключим наш файл style к файлу index. В мета-теге добавьте следующий тег <link>.
<head>
...
<link rel="stylesheet" href="style.css">
...
</head>
Давайте добавим некоторые стили для нашей формы, меток, входов и кнопки.
form {
max-width: 980px;
min-width: 320px;
}
label {
text-transform: uppercase;
}
input {
box-sizing: border-box;
display: block;
width: 60%;
margin-bottom: 18px;
}
button {
background-color: #1da1f2;
border: none;
border-radius: 10px;
color: #f5f8fa;
width: 60%;
padding: 6px;
}
Хорошо, конечный результат должен выглядеть следующим образом. Этого вполне достаточно для простой формы.
Давайте снова зафиксируем их с помощью Git.
Во-первых, git status.
На этот раз мы видим другое сообщение, чем в первый раз, когда мы выполнили git status. Это потому, что Git теперь может отслеживать эти файлы. Сейчас он говорит, что есть «изменения, которые ещё не поставлены на фиксацию».
Давайте добавим их по одному, используя git add.
git add index.html
git status
Мы знаем, что успешное git add не дает никакого ответа. Но мы все еще можем использовать git status, чтобы увидеть, что произошло.
Из нового сообщения видно, что файл index.html находится в разделе изменений, которые должны быть зафиксированы, и его цвет зеленый, что указывает на то, что мы можем использовать git commit и он зафиксирует только файл index.html. Важно также добавить сообщение к нашему коммиту. Давайте сделаем это.
git commit -m "add form with three fields and a submit button"
Наша фиксация прошла успешно. Мы зафиксировали все изменения в файле index.html, и Git обновлен последними изменениями.
Давайте еще раз воспользуемся git status, чтобы посмотреть текущее состояние.
Теперь мы видим только файл style.css и ничего о файле index.html. Это потому, что с момента последней фиксации в этом файле не было никаких изменений.
Давайте добавим файл стилей на сцену и зафиксируем его, чтобы Git также был в курсе изменений в файле style.css.
git add style.css
git commit -m "style the simple form we built"
Из короткого сообщения видно, что эта фиксация также прошла успешно. Теперь мы закончили добавлять наши изменения и фиксировать их с помощью Git.
Если вы снова выполните git status, то увидите, что там написано «nothing to commit, working tree clean». Это означает, что все файлы в этой папке обновлены в Git’е и нет никаких изменений, сделанных с момента последней фиксации.
Бонус: git log
Мы можем увидеть все фиксации, которые были сделаны в этой папке, используя другую команду,
git log
Вы можете увидеть список всех сделанных коммитов, их SHA-код, кто сделал изменения вместе с адресом электронной почты, когда были сделаны изменения и сообщение, введенное при коммите. Эта команда очень полезна. Есть много других возможностей git log, но на данный момент это отличный список информации обо всех сделанных коммитах.