Webdevkin
Онлайн-курсы, статьи по веб-разработке и интернет-магазинам, уроки vue.js

Git для начинающих. Урок 3.
git status и git diff

Урок, в котором мы сделаем первые изменения с помощью git и научимся смотреть эти изменения

Видеоурок

Конспект урока

Краткое содержание урока, основные инструкции для командной строки, полезные ссылки и советы.

Создаем тестовый сайт и инициализируем репозиторий

С этого момента мы будем проходить уроки на примере тестового сайта site-git. Проект содержит три файла: index.html, css/main.css и .gitignore. По мере прохождения уроков будем понемногу расширять сайт, вносить изменения и добавлять новые файлы.

Гнаться за красотой не будем, сайт очень простой. Главное, сосредоточиться на сути, поэтому верстки и стилей будет минимум. Даже если вы не знакомы с html и css, то легко разбересь в нашем простом примере.

Создайте на github новый приватный репозиторий site-git. Скачайте архив с файлами сайта и распакуйте содержимое в папку site-git

Обратите внимание на .gitignore

Кроме index.html и main.css в архиве лежит еще скрытый файл .gitignore. Это файл, в котором прописаны папки и файлы, которые git не отслеживает. Подробнее о .gitignore мы поговорим во второй части курса

После этого нужно инициализировать репозиторий, как мы делали в прошлом уроке. Не забудьте поправить имя Webdevkin на свое.


    $ cd site-git
    $ git init
    $ git add .
    $ git commit -m "first commit"
    $ git remote add origin git@github.com:Webdevkin/site-git.git
    $ git push -u origin master

Теперь все приготовления сделаны, приступим к изменениям в проекте.

Вводная

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

Git позволяет легко отслеживать все изменения, видеть добавленные и удаленные файлы в проекте, а также изменения в самих файлах. Если мы изменим хоть один символ в коде, git заметит это изменение и уже не потеряет. Команды git status и git diff (от слова difference - разница) позволяют отслеживать все изменения в проекте.

git status

Эта команда показывает список измененных файлов


    $ git status

Также git status выводит некоторую дополнительную информацию, которую мы изучим позже.

В PhpStorm - окно Version Control (Вызов окна - Alt+9)

git diff

Это команда для просмотра изменений в файлах. В терминале мы видим добавленные и удаленные строки. То есть если в строке изменился хоть один символ, то git diff покажет 2 строки: одну удаленную, другую - добавленную.

Просмотр всех изменений


    $ git diff

Просмотр изменений в отдельном файле


    $ git diff index.html

Изменения в PhpStorm

В онке Version Control мы сразу видим список измененных файлов. Чтобы посмотреть изменения в конкретном файле, нужно кликнуть на него и нажать Crtl+D (diff). В окне difference видны не только добавленные и удаленные строки, но и изменения в отдельных строках.

Плюсы PhpStorm

  • список измененных файлов можно держать открытым, не обязательно набирать git status
  • измененные строки видны сразу же в редакторе кода
  • просмотр изменений визуально нагляднее, чем в терминале (показываются даже изменения в отдельных строках)
  • проще откатить отдельные изменения

PhpStorm отлично интегрируется с git. Конечно, не он один. Некоторые продвинутые редакторы кода тоже могут работать с git. Вы можете посмотреть, как реализована поддержка git, например, в sublime, но это далеко не так удобно, как в IDE от JetBrains. Это не реклама, а просто совет использовать удобные инструменты.

PhpStorm платная программа (9 $/месяц на январь 2020 года), но это затраты, которые окупятся. Рекомендую.

Sublime vs PhpStorm

Поддержка git в Sublime Text 3

В Sublime Text 3 ситуация несколько изменилась - поддержка git улучшилась. Подробнее рассмотрим работу с git в sublime во второй части курса

На этом все. В конспекте информации мало, только основные команды, поэтому смотрите видеоурок. Там все нагляднее и понятнее.

В следующем уроке мы познакомимся с коммитами и научимся с ними работать.

Спасибо за внимание и до встречи!

Понравилось? Поделись с другими :-)