[Dev] แนะนำ Git Mergetool สำหรับช่วย Merge code แบบมี GUI ด้วย kdiff3 และ meld

Merge conflict!! คำนี้ สำหรับผู้ที่ทำ Version Control ด้วย Git คงจะคุ้นเคยกันดี และไม่ค่อยชอบมันซักเท่าไหร่ เพราะว่าเราจะต้อง Solve มันให้เรียบร้อย ถึงจะ Merge Commit ได้

Git-logo_Mergetool-GUI-with-kdiff3-and-meld

สำหรับ Editor ที่มี Version Control ในตัว ที่ Support Git อยู่แล้ว การ Solve conflict คงไม่ยากเท่าไหร่ เพราะส่วนใหญ่แล้ว เครื่องมือเหล่านั้น จะมีตัวช่วยอยู่แล้ว แต่สำหรับงานที่ใช้ Git เดิม ๆ คงไม่สนุกเท่าไหร่ เพราะต้องใช้ Text Editor เปิดไฟล์ที่เกิด Conflict มา Solve ด้วยมือ ยิ่งถ้า Conflict หลาย ๆ จุดนี่ ยิ่งเสียเวลาในการ Solve มาก และโอกาส Solve ผิดพลาดก็เกิดขึ้นได้

สำหรับบทความตอนนี้ ขอเสนอ Mergetool แบบมี GUI สำหรับ Windows ให้เราคลิก ๆ เลือกเอาได้ โดยจะแนะนำเครื่องมือยอดนิยม 2 ตัว นั่นก็คือ kdiff3 และ meld ซึ่งเราจะต้องผูกเครื่องมือเหล่านี้ เข้ากับ Git ให้เรียบร้อยก่อน ถึงจะใช้งานมันได้

 

List of contents

 

ก่อนจะไปถึงหัวข้อแรก เรามาเตรียม Git Repository กันก่อน ซึ่งผมได้เตรียมไว้ให้เป็นแบบ Codelab เพื่อให้ผู้อ่านได้ลองทำตามกันได้เลย ก็… ขอให้ทุกท่าน ไป Clone ได้จาก GitHub เลยครับ

คงจะ Clone เป็นกันละเน๊อะ~!! ถ้า Clone ไม่เป็น ไปอ่านบนความเก่า ๆ เกี่ยวกับ Git ก่อนนะ

เมื่อ Clone มาแล้ว จะเห็นว่ามี Remote Branch อยู่ทั้งหมด 3 Branch ก็คือ master, kdiff3 และ meld ให้ทำการสร้าง Local Branch ตาม Remote Branch เลย ก็จะได้ตามรูปด้านล่าง

ลองเปลี่ยน Branch แต่ละ Branch แล้วดูไฟล์ git-mergetool-codelab.txt นะครับ ว่าแต่ละ Branch แตกต่างกันอย่างไร

Git Mergetool Codelab
Git Mergetool Codelab

ทำให้ได้เหมือนในรูปก่อนนะ

OK ถ้าพร้อมแล้ว ไปลง Mergetool กันต่อเลย

 

Install kdiff3

kdiff3 เป็นหนึ่งใน Mergetool ยอดนิยม สามารถ Download ได้ที่ http://kdiff3.sourceforge.net/

ปัจจุบัน kdiff3 Version ล่าสุดคือ 0.9.98 ซึ่งปล่อยออกมาเพิ่งจะครบ 1 ปี ในไม่กี่วันนี้เอง นานขนาดนี้ ผมเลยคิดว่าน่าจะหยุดพัฒนาไปแล้ว หรือตัว kdiff3 มันสมบูรณ์แล้ว ไม่มีอะไรให้แก้ไขอีกก็เป็นได้

สำหรับ Windows นั้น kdiff3 มี Version 32 bit และ 64 bit แยกกัน เลือกให้ถูกตาม Version ของ Windows ด้วยนะครับ

ส่วนขั้นตอนการติดตั้งนั้น ไม่มีอะไรยุ่งยาก Next ๆๆๆ ไป จบ เย่~!!

หน้าตาของ kdiff3 ก็ประมาณนี้ อย่าเพิ่งไปสนใจมันมาก เพราะเราจะไม่ได้เปิดมันขึ้นมาเองตรง ๆ

About dialog ของ kdiff3
About dialog ของ kdiff3

 

Install meld

meld เป็นอีกหนึ่งใน Mergetool ยอดนิยมเช่นกัน สามารถ Download ได้จาก http://meldmerge.org/

ปัจจุบัน Meld อยู่ที่ Version 3.12.3 ซึ่งปล่อยออกมาเมื่อ 3 วันก่อนนี่เอง

สำหรับการติดตั้งก็ไม่มีอะไรยาก Next ๆๆๆ เช่นกัน #จบข่าว

เช่นกัน ไม่ต้องสนใจหน้าตาของ meld เพราะเราจะไม่ได้ใช้มันตรง ๆ

About dialog ของ meld
About dialog ของ meld

 

Config path of mergetool

การใช้งาน kdiff3 และ meld นั้น อย่างที่แจ้งในหัวข้อก่อน ๆ ว่า เราจะไม่ได้เปิดมันขึ้นมาใช้งานตรง ๆ แต่เราจะเปิดจาก Git GUI เมื่อเวลาเราเจอ Conflict จากการ Merge Branch นั่นเอง โดยเราสามารถ คลิกขวาใน Git GUI จะพบกับเมนู Run Merge Tool

เมนู Run Merge Tool บน Git GUI
เมนู Run Merge Tool บน Git GUI

ลองคลิกเข้าไปดู จะพบกับ Error เนื่องจากว่าเรายังไม่ได้ Config ให้ Git รู้ว่า Mergetool ที่เราติดตั้งลงไปนั้น มันอยู่ที่ไหน…

Error dialog เมื่อคลิกเมนู Run Merge Tool
Error dialog เมื่อคลิกเมนู Run Merge Tool

สำหรับวิธีการ Config นั้น เราจะต้องพิมพ์ Command บน Git Bash ดังนี้

สำหรับ kdiff3

Config path ของ kdiff3 ให้ Git
Config path ของ kdiff3 ให้ Git

สำหรับ meld

Config path ของ meld ให้ Git
Config path ของ meld ให้ Git

มี Tip นิดนึง ตอนพิมพ์ Path+File ให้เปิดด้วยเครื่องหมาย Double Quote (“) แล้วพิมพ์ /Drive Letter/Path/to/File.exe ประมาณนี้ โดยพิมพ์แค่บางส่วน แล้วกด Tab มันจะเติมให้เอง หรือขึ้นตัวเลือกมาให้ ดังที่เห็นใน 2 รูปด้านบน

สามารถตรวจสอบ Config ที่กำหนดค่าลงไปได้จากคำสั่ง

และ

หรือ

ทีนี้ลองคลิก Run Merge Tool บน Git GUI จะพบว่า มันรัน meld ขึ้นมา…

แล้ว kdiff3 ล่ะ!?

เพราะว่า Git GUI มี Default ของ Mergetool เป็น meld นั่นเอง แต่เราจะไปเล่น kdiff3 กันก่อนนะ…

 

Solve conflict with kdiff3

ก่อนอื่นเราต้องไป Config ให้กับ Git เพื่อบอก Git ว่า Mergetool ที่เราจะใช้ เป็น kdiff3 นะ โดยเข้าไปที่ Git GUI Option (เมนู Edit > Options…) แล้วระบุในช่อง Use Merge Tool ว่า kdiff3 โดยจะ Config เป็น Local หรือ Global ก็ได้ ส่วนรูปข้างล่างนี้ ผมจะ Config เป็น Global ลงไป

Dialog ของ Git GUI Options
Dialog ของ Git GUI Options

แค่นี้เราก็จะสามารถใช้ kdiff3 ในการ Solve conflict ได้แล้ว

กลับมาที่ Git-Mergetool-Codelab Repository ที่ผมเตรียมไว้ให้ ให้ Checkout ไปที่ Branch kdiff3 ให้เรียบร้อย

แล้วต่อด้วยการ Merge Branch meld ไปยัง kdiff3 ก็จะพบ Conflict แล้ว

Merge Dialog ของ Git GUI
Merge Dialog ของ Git GUI
เมนู Run Merge Tool บน Git GUI
เมนู Run Merge Tool บน Git GUI

ก็… คลิกขวา เลือก Run Merge Tool โลด จะรออะไร…

ถ้า meld ถูกเปิดขึ้นมาแทน kdiff3 ลองปิดไปก่อน และปิด Git GUI แล้วค่อยเปิดขึ้นมาใหม่ เหมือนจะเป็น Bug เล็ก ๆ ของ Git GUI นะครับ

kdiff3 ก็จะรับช่วงต่อไป โดยจะแจ้งรายละเอียดของ Conflict ดังรูป

kdiff3 เมื่อถูกเรียกใช้งานจาก Git GUI
kdiff3 เมื่อถูกเรียกใช้งานจาก Git GUI

โดยหน้าจอของ kdiff3 นั้น แบ่งออกเป็น 4 ส่วน คือ ส่วนที่ (1) คือข้อมูลไฟล์จาก Base Commit (จะเรียกว่า A) ก็คือ Commit ที่เป็นจุดรวมก่อนที่จะแยก Branch ในตัวอย่างคือ Commit แรก ในส่วนที่ (2) คือข้อมูลของไฟล์จาก Branch ปลายทาง (จะเรียกว่า B) ในตัวอย่างคือ Branch kdiff สำหรับส่วนที่ (3) คือข้อมูลของไฟล์จาก Branch ต้นทาง (จะเรียกว่า C) ในตัวอย่างคือ Branch meld และในส่วนที่ (4) คือ Output ที่จะได้หลังจากเรา Solve แล้ว

ส่วนต่าง ๆ ของ kdiff3
ส่วนต่าง ๆ ของ kdiff3

การ Solve Conflict บน kdiff3 ทำได้โดยการ คลิกขวาในบรรทัดที่ต้องการ Solve แล้วเลือกว่า จะใช้ข้อมูลจาก A, B หรือ C และสังเกตุที่ด้านหน้าบรรทัด จะมีบอกว่า ข้อมูลในแต่ละบรรทัด มาจากไหน

ในตัวอย่างนี้ ขอให้เลือก Select Line(s) From B และ Select Line(s) From C ในทุกจุดที่เกิด Conflict (ลำดับก่อน-หลัง ของการเลือก A, B และ C มีผลต่อ Output) ก็คือเราจะเอาบรรทัดจากทั้ง Branch kdiff3 และ meld เลย ก็จะได้เป็นดังนี้

Solve Conflict ด้วย kdiff3
Solve Conflict ด้วย kdiff3

เมื่อ Solve ได้ตามที่ต้องการแล้ว ให้ปิด kdiff3 ไปได้เลย จะมี Dialog ขึ้นมาเตือน ก็เลือก Save & Quit ไป

Solve Conflict ด้วย kdiff3
Solve Conflict ด้วย kdiff3

กลับไปที่ Git GUI ถ้าเปิดค้างไว้อยู่ ให้กดปุ่ม Rescan ครั้งนึง เพื่อทำการ Refresh ข้อมูล ก็จะเห็นว่า ไฟล์ git-mergetool-codelab.txt ได้ถูก Solve เรียบร้อยแล้ว

Git GUI แสดงผลหลังจาก Solve Conflict ด้วย kdiff3
Git GUI แสดงผลหลังจาก Solve Conflict ด้วย kdiff3

เห็นไฟล์ .orig ไม๊ครับ มันคือ Backup ของไฟล์ก่อนการ Solve นั่นเอง เผื่อกรณีผิดพลาด หรืออยากเปรียบเทียบข้อมูลก่อน-หลัง Solve Conflict ก็สามารถทำได้

 

Solve conflict with meld

มาลองใช้ meld กันบ้าง ก็เข้าไปที่ Git GUI Option แล้วระบุในช่อง Use Merge Tool ว่า meld (หรือจะลบทิ้งก็ได้ มันมี Default เป็น meld อยู่แล้ว)

ที่ Git-Mergetool-Codelab Repository ให้ Checkout ไปที่ Branch meld บ้าง แล้วต่อด้วยการ Merge Branch kdiff3 ไปยัง meld ก็จะพบ Conflict เช่นกัน แล้วต่อด้วยคลิกขวา เลือก Run Merge Tool เลย

ขี้เกียจ Capture รูปแล้ว

คราวนี้ Meld ก็จะรับช่วงต่อ โดยหน้าจอของ Meld จะแบ่งเป็น 3 ส่วน คือ (1) ข้อมูลไฟล์จาก Branch ปลายทาง ในตัวอย่างคือ Branch meld (2) ข้อมูลของไฟล์ที่เกิด Merge Conflict (3) ข้อมูลของไฟล์จาก Branch ต้นทาง

ส่วนต่าง ๆ ของ meld
ส่วนต่าง ๆ ของ meld

สังเกตุว่า จะมีหัวลูกศรสีดำ ให้เราสามารถเลือกจากส่วนต่าง ๆ ข้ามไปมาได้ ในตัวอย่างนี้ ให้คลิกหัวลูกศรจากทั้งส่วนที่ (1) และ (3) ไปยังส่วนที่ (2)

ในตัวอย่างจะพบว่า ในจุดที่เกิด Conflict จุดแรก ไม่สามารถรวม Code จากทั้ง 2 ฝั่งเข้ามาได้ จะรวม Code ได้ต้องทำการ Add Synchronization Point โดยการคลิกขวาทั้ง 3 ส่วน เพื่อสร้างเส้นแบ่งให้ meld รู้ว่าจะเชื่อมโยงกันอย่างไร แต่ Conflict จุดที่ 2 กลับรวมได้เลย แต่ไม่สามารถจัดลำดับก่อน-หลังได้เหมือน kdiff3 หากต้องการจัดลำดับก่อน-หลัง ต้องทำ Synchronization Point ด้วย

เมื่อ Solve Conflict เรียบร้อยแล้ว กดปิด meld ไปได้เลย จะพบกับ Dialog ถามก่อน ก็เลือก Save ไป

Solve Conflict ด้วย meld
Solve Conflict ด้วย meld

กลับไปที่ Git GUI ถ้าเปิดค้างไว้อยู่ ให้กดปุ่ม Rescan ครั้งนึง เพื่อทำการ Refresh ข้อมูล ก็จะเห็นว่า ไฟล์ git-mergetool-codelab.txt ได้ถูก Solve เรียบร้อยแล้ว

Git GUI แสดงผลหลังจาก Solve Conflict ด้วย meld
Git GUI แสดงผลหลังจาก Solve Conflict ด้วย meld

 

สรุปกันหน่อย

ทั้ง kdiff3 และ meld ต่างก็มีข้อดี-ข้อเสีย แตกต่างกัน จากตัวอย่างด้านบน จะเห็นว่า kdiff3 นั้น UI จะเชย ๆ นิดนึงและการ Solve ต้องคลิกหลายที แต่กลับทำงานได้ละเอียดกว่า ส่วน meld นั้น UI จะเรียบง่าย สวยงาม แต่การ Solve ในบางกรณี ต้องทำ Synchronization Point ซึ่งยุ่งยากพอสมควร

ดังนั้น ผมจึงแนะนำให้ใช้งานทั้ง 2 ตัว ควบคู่กันไป แล้วแต่กรณีละกันนะ

ส่วนใครที่ใช้แล้ว ชอบไม่ชอบ kdiff3 และ meld ตรงไหน มาโพสคุยกันนะครับ

 

อ้างอิง – Git Mergetool – Merging With a GUI

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.