آموزش گیت – قسمت چهارم

نویسنده : سید ایوب کوکبی ۱۹ اردیبهشت ۱۳۹۸
آموزش گیت - قسمت چهارم

شاخه، انشعاب یا Branch یکی از مهم‌ترین اجزای گیت محسوب می‌شود. شاخه در فرهنگ گیت به مسیر مجزایی از توسعه گفته می‌شود. در غیاب گیت وقتی می‌خواهید فیچر جدیدی به برنامه اضافه کنید یا تغییرات بزرگی اعمال نمایید از فولدر پروژه یک کپی می‌گیرید و کار را بر روی آن انجام می‌دهید. اگر از نتیجۀ کار راضی بودید فایل‌ها را در فولدر اصلی پروژه جایگزین و در غیر این صورت آن فولدر را حذف می‌کنید.

شاخه‌ها در گیت دقیقاً همین کار را انجام می‌دهند افزون بر اینکه قابلیت‌های بیشتری هم دارند. اولاً شاخه‌ها به روشی عاری از خطا تغییرات جدید را کنترل می‌کنند و ثانیاً نیازی به ساخت فولدر جدید نیست؛ همه چیز در همان فولدر اصلی پروژه نگه‌داری می‌شود. این کار مدیریت فایل‌های پروژه را بسیار آسان می‌کند و ثالثاً با یک دستور ساده می‌توانید انشعاب را با دیگران به اشتراک بگذارید یا حذف کنید.

نمایش شاخه‌های موجود

با دستور پایین، فهرست تمام شاخه‌های موجود نمایش داده می‌شود:

git branch

و چون در حال حاضر فقط یک شاخۀ master * وجود دارد همان را نشان می‌دهد که شاخۀ پیش‌فرض در گیت محسوب می‌شود. علامت ستاره‌ یعنی در حال حاضر این شاخه چک‌اوت شده یا به عبارتی آخرین اسنپ‌شات شاخۀ مستر در حال حاضر داخل working directory قرار دارد:

شاخۀ مستر در گیت

با توجه به اینکه برای هر پروژه فقط یک working directory وجود دارد، در هر زمان فقط می‌توان یک شاخه را چک‌اوت کرد.

چک‌اوت کردن یک شاخه

در قسمت قبل، توضیح زیادی دربارۀ عملکرد چک‌اوت ندادیم ولی الان می‌توانیم با عمق بیشتری به آن بپردازیم. در ابتدا به checksum کامیت نیاز داریم. دستور log را وارد کنید:

git log --oneline

چنین خروجی خواهیم دید:

۵۰۶bb9b Revert "Add a crazzzy experiment"
۵۱۴fbe7 Add a crazzzy experiment
۱c310d2 Add navigation links
۵۴۶۵۰a3 Create blue and orange pages
b650e4b Create index page

کامیت Add crazy experiment را می‌خواهیم چک‌اوت کنیم. بنابراین ID اش را وارد می‌کنیم:

git checkout 514fbe7

دستور فوق، پیامی نشان می‌دهد که ما در detached HEAD state هستیم و اکنون HEAD در ۵۱۴fbe7 قرار دارد. گیت از HEAD به عنوان روشی داخلی برای نشان دادن کامیتی که در حال حاضر چک‌اوت شده استفاده می‌کند. این یعنی دایرۀ قرمزی که تاکنون در تصاویر مشاهده کردید HEAD را نشان می‌دهد. تصویر پایین، وضعیت مخزن را قبل و بعد از چک‌اوت کردن کامیت نشان می‌دهد:

چک‌اوت کردن کامیت چهارم

در تصویر before می‌بینیم که HEAD در نوک شاخه قرار دارد. بعد از چک‌اوت کامیت قبلی، HEAD به عقب حرکت می‌کند چون در حال حاضر working directory محتویات آن کامیت را نشان می‌دهد. اکنون نمی‌توانیم بگوییم همچنان روی شاخۀ مستر هستیم چون شاخۀ مستر آخرین اسنپ‌شات را نشان می‌دهد که در حال حاضر HEAD به کامیت قبلی اشاره می‌کند. این موضوع را می‌توان با زدن دستور git branch متوجه شد.

ساخت یک شاخۀ جدید

زمانی که روی هیچ شاخه‌ای نباشیم نمی‌توانیم کامیت ایجاد کنیم؛ پس ابتدا باید یک شاخۀ جدید بسازیم. دستور پایین محتویات فعلی working directory را در یک شاخۀ جدید قرار می‌دهد:

git branch crazy

git branch دستور خوبی برای مشاهدۀ لیست شاخه‌ها و ساخت شاخه‌های جدید است. دستور بالا فقط شاخۀ جدیدی به نام crazy درست می‌کند ولی آن را چک‌اوت نمی‌‌کند. این کار را باید خودمان انجام دهیم

git checkout crazy

اکنون بدون دست زدن به شاخۀ مستر، می‌توانیم محتویات working directory را در شاخۀ جدید یعنی crazy توسعه دهیم. این شاخه کاملاً ایزوله بوده و هر تغییری فقط در همین شاخه اعمال می‌شود. هر زمان بخواهیم می‌توانیم به شاخۀ مستر سوئیچ کنیم.

ساخت یک شاخۀ جدید

حالا شاخۀ crazy، HEAD و working directory همگی در کامیت چهارم قرار دارند. ولی به محض اینکه کامیت دیگری اضافه کنیم، یک fork در تاریخچۀ پروژه خواهیم دید.

بخوانید  روش‌های ساخت اپلیکیشن موبایل

تغییر فایل crazy

محتویات فایل crazy.html را به صورت زیر تغییر دهید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A Crazy Experiment</title>
  <meta charset="utf-8" />
</head>
<body>
  <h1>A Crazy Experiment</h1>
  <p>Look! A Rainbow!</p>

  <ul>
    <li style="color: red">Red</li>
    <li style="color: orange">Orange</li>
    <li style="color: yellow">Yellow</li>
    <li style="color: green">Green</li>
 <li style="color: blue">Blue</li>
    <li style="color: indigo">Indigo</li>
    <li style="color: violet">Violet</li>
  </ul>
    
  <p><a href="index.html">Return to home page</a></p>
</body>
</html>

استیج و کامیت کردن تغییرات

همانند قبل، تغییرات اعمال شده را استیج و کامیت کنید:

git add crazy.html
git status
git commit -m "Add a rainbow to crazy.html"

بعد از کامیت کردن در شاخۀ crazy شاهد یک خط جدید در مسیر توسعۀ آن خواهیم بود:

فورک کردن تاریخچۀ پروژه

همچنین HEAD (دایرۀ قرمز) را می‌بینید که به صورت خودکار به کامیت جدید منتقل شده است. این همان چیزی است که در روال طبیعی توسعۀ پروژه نیز انتظار داریم. نمودار بالا وضعیت کاملی از مخزن را به ما نشان می‌دهد ولی git log فقط تاریخچۀ کامیت‌ها در شاخۀ جاری را نشان می‌دهد.

۶۷۷e0e0 Add a rainbow to crazy.html
۵۱۴fbe7 Add a crazzzy experiment
*۱c310d2 Add navigation links
*۵۴۶۵۰a3 Create blue and orange pages
*b650e4b Create index page

توجه کنید که تاریخچۀ قبل از fork به عنوان بخشی از شاخۀ جدید بوده که با علامت ستاره مشخص شده است. این یعنی تاریخچۀ crazy همه چیز قبل از خود را تا کامیت اول در بر می‌گیرد.

تاریخچۀ شاخۀ crazy

تاریخچۀ پروژه اکنون کمی پیچیده‌ای شده است. در عین حال که هر شاخه به طور مستقل تاریخچۀ خطی خود را دارد (اسنپ‌شات‌هایی که پشت سر هم قرار گرفته‌اند)، تاریخچۀ شاخه‌ها نیز محفوظ است. یعنی می‌توانیم با شاخه‌ها نیز همانند کامیت‌ها برخورد کنیم.

تغییر نام فایل

اجازه دهید اسنپ‌شات دیگری به شاخۀ crazy اضافه کنیم. فایل crazy.html را به rainbow.html تغییرنام دهید. سپس از دستورات زیر برای بروزرسانی مخزن استفاده کنید.

git status
git rm crazy.html
git status
git add rainbow.html
git status

دستور git rm به گیت می‌گوید که فایل crazy.html را دیگر دنبال نکند و در صورت ضرورت آن را حذف کند. با دستور git add، گیت شروع می‌کند به دنبال کردن فایل rainbow.html. عبارت renamed: crazy.html -> rainbow.html در خروجی نهایی نشان می‌دهد که گیت به اندازه‌ای هوشمند هست که حتی تغییر نام فایل‌ها را هم تشخیص دهد.

اسنپ‌شات ما اکنون استیج شده و آمادۀ کامیت‌گیری است:

git commit -m "Rename crazy.html to rainbow.html"
git log --oneline

بعد از اجرای دستورات بالا، تاریخچۀ کامل پروژه به شکل زیر در می‌آید. به خاطر داشته باشید که شاخۀ crazy هیچ یک از کامیت‌های شاخۀ مستر را بعد از fork در بر نمی‌گیرد.

تاریخچۀ فعلی پروژه

بازگشت به شاخۀ مستر

حالا بیایید به شاخۀ مستر سوئیچ کنیم:

git checkout master
git branch
git log --oneline

بعد از چک‌اوت کردن شاخۀ مستر، فایل crazy.html و rainbow.html دیگر در working directory وجود ندارند و کامیت‌های شاخۀ crazy در تاریخچه نمایش داده نمی‌شوند. دلیلش این است که دو شاخه کاملاً از هم مستقل بوده و هر آنچه بعد از فورک کردن شاخۀ crazy اضافه شده درتاریخچۀ شاخۀ مستر نمایش داده نمی‌شود چون ارتباطی به آن ندارد. می‌توانید هر شاخه را مثل یک فولدر مجزای پروژه در نظر بگیرید که با دستور git checkout بین آن‌ها سوئیچ می‌کنید. طبق تصویر پایین چهار کامیت اول بین دو شاخه مشترک بوده و در تارخچۀ هر دو نمایش داده می‌شوند.

تاریخچۀ مشترک بین دو شاخه

ساخت شاخۀ CSS

حالا قصد داریم کمی استایل‌شیت به صفحات html خود اضافه کنیم. ضرورتی به فهم کدها نیست چون ما فقط به دستورات گیت کار داریم ولی اگر دوست داشتید می‌توانید با جستجویی در اینترنت مقدمات html و css را در حد فهم کدهای این آموزش یاد بگیرید. شاخۀ جدیدی می‌سازیم به نام css و به آن سوئیچ می‌کنیم:

git branch css
git checkout css

شاخۀ جدید مصادف شده است با آخرین اسنپ‌شاتی که در شاخۀ مستر وجود دارد. دایرۀ قرمز HEAD را نشان می‌دهد.

ساخت شاخۀ css

افزودن استایل شیت

یک فایل style.css با محتویات زیر ایجاد می‌کنیم. این فایل برای اعمال تغییرات ظاهری روی صفحات html به کار می‌رود.

body {
  padding: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #111;
}

p, ul {
  margin-bottom: 10px;
}

ul {
  margin-left: 20px;
}

تغییرات را استیج و سپس کامیت کنید:

git add style.css
git status
git commit -m "Add CSS stylesheet"

اتصال استایل شیت به صفحۀ html

باید این فایل را به صفحات html معرفی کنیم تا برای قالب‌بندی خود از آن استفاده کند. فایل‌های index.html, blue.html و orange.html را باز کنید و بعد از تگ title خط زیر را اضافه کنید (در نظر داشته باشید که فایل rainbow.html فقط در شاخۀ cray وجود دارد). با باز کردن فایل index در مرورگر تغییرات را خواهید دید.

<link rel="stylesheet" href="style.css" />

تغییرات را کامیت کنید:

git add index.html blue.html orange.html
git status
git commit -m "Link HTML pages to stylesheet"
git log --oneline

اکنون تاریخچۀ پروژه مشابه تصویر پایین است:

تاریخچۀ فعلی پروژه

بازگشت مجدد به شاخۀ مستر

شاخۀ css به ما اجازه می‌دهد تا بدون تهدیدِ شاخۀ مستر، تغییرات مربوط به قالب‌بندی صفحات را تست کنیم. ولی اکنون از تغییرات اعمال شده راضی هستیم و دوست داریم با پروژۀ اصلی ترکیب شوند. قبل از ادغام باید به شاخۀ مستر سوئیچ کنیم:

git checkout master

اکنون فایل style.css نباید در فولدر پروژه وجود داشته باشد و صفحات html نیز نباید به آن لینک شده باشد. تاریخچۀ مخزن دست نخورده باقی مانده است ولی بعد از چک‌اوت، محتویات working directory با آخرین اسنپ‌شات شاخۀ مستر هماهنگ می‌شود.

تاریخچۀ فعلی پروژه

یکبار git log –oneline بزنید تا فهرست کامیت‌ها را مشاهده کنید:

af23ff4 Revert "Add a crazzzy experiment"
a50819f Add a crazzzy experiment
۴cd95d9 Add navigation links
dcb9e07 Create blue and orange pages
f757eb3 Create index page

طبق انتظار هیچ اثری از کامیت‌های شاخۀ css نیست. ولی ما می‌خواهیم محتویات این شاخه را با مستر ترکیب کنیم.

بخوانید  راهنمای مقدماتی گیت (git)

ادغام شاخۀ css در شاخۀ مستر

دستور git merge اسنپ‌شاتی از شاخۀ css می‌گیرد و آن را به شاخۀ مستر اضافه می‌کند.

git merge css

توجه کنید این دستور همیشه به شاخۀ کنونی که در آن هستید ادغام می‌کند و شاخۀ css دست نخورده باقی می‌ماند. ما چون می‌خواستیم تغییرات را به شاخۀ مستر اضافه کنیم ابتدا به master چک‌اوت کردیم. اکنون اگر لاگ بگیرید خواهید دید که تاریخچۀ css به مستر اضافه شده است:

git log --oneline

تصویر پایین وضعیت فعلی تاریخچه را نشان می‌دهد:

ادغام شاخۀ css و master

در واقع گیت به جای ساخت مجدد کامیت‌های شاخۀ css و اضافه کردن آن به تاریخچۀ مستر، نوکِ مستر را به نوک شاخۀ css جابه‌جا می‌کند. به این نوع ادغام، fast-forward merge گفته می‌شود. بعد از ادغام، هر دو شاخه، تاریخچۀ یکسانی دارند که نشان می‌دهد شاخۀ css دیگر لازم نیست مگر بخواهید آن را دوباره توسعه دهید.

حذف شاخۀ css

برای حذف شاخه از دستور زیر استفاده می‌کنیم:

git branch -d css
git branch

بعد از اجرای دستور بالا، شاخۀ css حذف شده و تاریخچۀ کلی پروژه به شکل زیر درمی‌آید:

تاریخچۀ پروژه بعد از حذف شاخۀ css

حذف شاخه‌ها در گیت ایمن است از این جهت که اگر شاخه‌ای که هنوز merge نشده را بخواهید حذف کنید، گیت به شما اخطار می‌دهد که شاخۀ unmerged شده را می‌خواهید حذف کنید. این یکی از مزیت‌های خوبِ گیت در مدیریت فایل‌های پروژه است.

جمع‌بندی

در این قسمت، تغییراتی را در دوشاخۀ مجزا روی پروژه اعمال کردیم. همانطور که دیدید شاخه‌ها مکانی ایزوله برای تست کردن تغییرات هستند و بدین ترتیب شاخۀ مستر از هر گونه خرابی احتمالی در امان خواهد بود . در ادامه شاخۀ css را در شاخۀ مستر ادغام کردیم و چون به آن نیاز نداشتیم حذفش کردیم. شاخۀ crazy را هم برای قسمت بعدی آموزش نگه داشته‌ایم. در طی آموزش با دیاگرام‌های مختلف وضعیت فعلی تاریخچۀ پروژه را نشان دادیم ولی در هنگام انجام کارهای روتین، نیازی به داشتن چنین دید سطح بالایی نیست. ساخت یک شاخۀ جدید واقعاً شبیه این است که یک working directory جدید، یک staging snapshot جدید و یک تاریخچۀ جدید از گیت درخواست کنیم. در قسمت بعدی با merge های پیشرفته‌تری آشنا خواهید شد.

بخوانید  روش‌های ساخت اپلیکیشن موبایل

چکیدۀ دستورات

  • git branch : نمایش فهرست شاخه‌ها؛
  • <git branch <branch-name : ساخت یک شاخۀ جدید از وضعیت فعلی working directory؛
  • <git checkout <branch-name : تطبیق HEAD و Working directory به یک شاخه، یعنی هر دو به یک شاخۀ مشخص اشاره کنند؛
  • <git merge <branch-name : ادغام شاخه در شاخۀ چک‌اوت شده؛
  • <git branch -d <branch-name : حذف یک شاخه؛
  • <git rm <file : حذف فایل از Working directory (در صورت امکان‌پذیر بودن) و توقف دنبال کردن آن فایل.

سید ایوب کوکبی

نویسنده و مترجم...

مطالب مرتبط

آموزش گیت – قسمت یازدهم

۲۷ اردیبهشت ۱۳۹۸

آموزش گیت – قسمت دهم

۲۷ اردیبهشت ۱۳۹۸

0 دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *