หัดเขียน Jade ตอนที่ 1

หลังจากที่เรารู้จักวิธีการใช้งาน jade จากบทความตอนที่แล้ว ในบทความนี้เราจะมาทำความรู้จักการเขียน jade กันต่อ โดยอันดับแรกต้องเริ่มจากโครงสร้างของเอกสาร HTML โดยปกติจะใช้งาน tag เปิดและ tag ปิด แต่ใน jade จะใช้การย่อหน้าแทนดังนั้นโครงสร้างเริ่มต้นของเอกสารจะเป็นรูปแบบดังนี้

ในส่วนของโครงสร้าง HTML จะเป็นตามรูปแบบด้านบน โดยการสร้าง tag จะเป็นไปตามรูปแบบดังนี้

จะเห็นว่าเราจะเริ่มต้นด้วยชื่อ tag เช่น link(….) จะ generate เป็น parameter ใน function แต่ละตัวจะเป็น attribute ต่างๆ เช่นจากใรตัวอย่าง

จะได้ผลลัพธ์ออกมาเป็น

สิ่งที่อยู่ในวงเล็บของ jade จะถูกแตกออกมาเป็น attribute แต่ละตัวของ tag link ซึ่งในการเขียน jade เราจะใช้ pattern แบบนี้ทั้งหมด
และถ้าเราจะใส่ code javascript จะใส่แบบนี้

ใน jade จะมีการใส่ content ใน 2 รูปแบบคือ

ซึ่งเราจะได้ผลลัพธ์แบบบรรทัดเดียว ดังนี้

และอีกรูปแบบคือ

เราจะได้ผลลัพธ์แบบมีการขึ้นบรรทัดใหม่(ต้องใส่ -P เข้าไปตอนที่ พrun command ด้วย) ซึ่งเราจะได้ผลลัพธ์แบบนี้

เราเลยใส่ . ต่อท้าย script เพื่อให้มีการขึ้นบรรทัดใหม่ และนี่ก็เป็นรูปแบบในการเขียน jade แบบเบื้องต้น จะเห็นได้ว่าเราสามารถเขียน jade ได้ง่ายๆ ในบทความต่อไปเราจะทำความรู้จักกับ jade กันให้มากขึ้น

การใข้งาน Jade Template Engine

จริงๆถ้าพูดถึง Template Engine ที่มีอยู่มากมายนับไม่ถ้วน ทั้งแบบที่มากับ Framework(เช่น Razor, Twig, Blade) และมาแบบไม่สนใจใครแบบ jade จริงๆแล้วถ้าพูดถึงปริมาณการใช้งาน Template Engine ถือว่ายังน้อย แต่ก็ถือว่าเพิ่มจากเมื่อก่อนเยอะมาก ข้อดีของ Jade ก็คงจะเหมือนกับ Template Engine ตัวอื่นๆ ซึ่งหลักๆแล้วจะทำให้ Code ที่เป็น HTML นั้นอ่านง่ายขึ้น(เพราะมันเขียนสั้นลง) โดยเฉพาะ Jade เราจะเขียนแบบใช้ indention(การย่อหน้า)แทนการใช้ Tag เปิดและ Tag ปิด แบบที่เราใช้ใน HTML ซึ่งทำให้ Code ของ Jade นั้นอ่านง่ายกว่ามากๆ ลองดูตัวอย่าง Jade เมื่อ เทียบกีบ HTML แบบปกติ ตามรูป

jade

ยิ่งในปัจจุบันไฟล์ HTML มักจำมีขนาดมากขึ้นเรื่อยๆ ทำให้การ maintain ทำได้ลำบากมาขึ้น Template Engine จะมาช่วยแก้ปัญหานี้

คราวนี้เรามาดูวิธีการติดตั้งและใช้งาน Jade กัน โดยเริ่มจากการติดตั้ง เราจะใช้ node package manager(npm) เป็นตัวติดตั้ง ถ้าใครยังไม่มีก็ไปติดต้ัง nodejs กันก่อน แต่ถ้าติดตั้ง nodejs เรียบร้อย เราก็ทำการติดต้ัง jade โดยใช้คำสั่ง

หลังจากนั้นเราจะสามารถใช้งาน jade ในการ transpile(transform + compile) หรือพูดง่ายๆว่าเป็นการแปลงจาก jade ไปเป็น HTML นั่นแหละ โดยไปยัง folder ที่เราเก็บ jade อยู่ แล้ว run คำสั่ง

เราจะได้ ไฟล์ชื่อ index.html โดยไฟล์นี้จะอ่านไม่ค่อยออกเนื่องจาก ยังไม่ได้ทำการจัด format ให้เรา ถ้าเราอยากจะให้ jade จัด format ให้เรา ต้องใส่พารามิเตอร์ -P เข้าไปด้วย ตามนี้

และถ้าเราต้องการให้ทุกครั้งที่เรา save ไฟล์ index.jade ให้ทำการ transpile(แปลงไฟล์ index.html) ใหม่ทุกครั้ง ให้ใส่ -w เพิ่มเข้าไปด้วย

นอกจากนี้เรายังสามารถกำหนด destination folder หรือ folder ปลายทางสำหรับเก็บ ไฟล์ html ที่ได้จากการ transpile ด้วยคำสั่ง

ผลลัพธ์ที่ได้จะถูกนำไปเก็บไว้ที่ folder html ใน directory ปัจจุบัน และนี่ก็เป็นวิธีการติดตั้งและใช้งาน jade เบื้องต้น ในบทความต่อไปเราจะพูดถึงการเอา gulp เข้ามาช่วยให้การ transpile ง่ายขึ้น