Attendee logo

ทำความรู้จักกับ YEOMAN

Category : Front-end Development

 

 

yeoman_

yeoman คือเครื่องมือที่ช่วยให้เราสามารถจัดการกับ application ของเราได้อย่างง่ายดาย ไม่ว่าจะเป็นการจัดการโครงสร้างของ application ที่ทำให้เราสามารถเริ่มต้นการ coding ได้แทบจะในทันที ไม่ต้องมาคอย include ไฟล์ต่างๆ เข้ามาใน application, live reload ที่เมื่อทุกครั้งที่เราแก้ไขไฟล์จะมีการ compile และ refresh browser ให้เราเองอัตโนมัติ และอื่นๆ อีกมากมาย โดย yeoman ประกอบด้วย 3 ส่วนหลักคือ

  1. yo เป็น tool สำหรับสร้างและแก้ไขโครงสร้างของ application (ขึ้นอยู่กับ generator ที่เลือกมาใช้)
  2. bower เป็น tool  สำหรับจัดการ library ต่างๆ ที่ต้องการ include เข้ามาใช้ใน project
  3. grunt เป็น task runner ที่จะช่วยในเรื่องการทดสอบ application ในระหว่าง development, การทำ testing, การ deploy เป็นต้น

ตามภาพด้านล่างเลยครับ

workflow.126c

 เริ่มการติดตั้ง yo และ generator

1. เข้า terminal หรือ command line แล้วรันคำสั่ง

 การติดตั้ง npm และ node สามารถอ่านได้ ที่นี่ ครับ

2. ตามมาด้วยการติดตั้ง grunt และ bower

เสร็จสิ้นในส่วนของขั้นตอนการติดตั้งแล้ว ถ้ารันคำสั่ง yo จะได้ผลลัพธ์ประมาณนี้ครับ เนื่องจากผมมีการติดตั้ง generator อื่นๆ เพิ่มเข้าไปแล้วผลลัพธ์อาจไม่เหมือนกันครับ

yo-interface

* ถ้าในขั้นตอนการ load package เกิด error เกี่ยวกับ permission ให้เพิ่ม  sudo ด้านหน้าเพื่อใช้สิทธิ์ของ root ในการเขียนไฟล์บนเครื่องนะครับ 

3. ติดตั้ง generator และสร้าง application ด้วยคำสั่ง yo

generator คือโครงสร้างของ app ที่เมื่อเราสร้างขึ้นมาจะมีลักษณะเหมือนกันทุกครั้ง (อาจแตกต่างกันบ้าง แล้วแต่การ setting ในแต่ละครั้ง) โดย generator ที่เราจะติดตั้งและใช้สำหรับสร้าง app ในครั้งนี้คือ generator-webapp เป็น generator พื้นฐานที่ประกอบด้วย HTML5 Boilerplate, jQuery, Modernizr และ Bootstrap โดยทำการติดตั้งผ่านคำสั่ง

* หากต้องการดู generator ตัวอื่นๆ สามารถดูได้ที่นี่ครับ

หลังจากที่ติดตั้ง generator เสร็จเรียบร้อย ก็มาสร้าง directory สำหรับเก็บ project ใหม่นี้

จากนั้นรันคำสั่ง

 

yo1

ให้เราเลือกว่าต้องการใช้ framework ที่มีอยู่ใน generator-webapp หรือไม่ ถ้าเราต้องการใช้อันไหนก็กด <space> เลือกได้เลยครับเสร็จเรียบร้อย เราก็จะได้ web application ที่มีโครงสร้างตาม generator ที่เราเลือกมาใช้ โดย generator-webapp จะมีโครงสร้างแบบนี้ครับ

 

structure

4. start application ด้วยคำสั่ง grunt

จากนั้น browser ที่เป็น default จะเปิดขึ้นมา เสร็จเรียบร้อยแล้วครับ

Screen-Shot-2557-08-20-at-12.54.39-PM

ต่อจากนี้ทุกครั้งที่มีการแก้ไขไฟล์ใดๆ ใน project และทำการ save ไฟล์ browser ก็จะ refresh ให้เองอัตโนมัติทันที

 

5. Grunt build สร้างไฟล์สำหรับใช้งานจริง

คำสั่ง grunt build จะทำการ compress, merge ไฟล์ต่างๆ เป็นการลดขนาดและจำนวนของไฟล์ใน project สำหรับนำไปใช้งานจริง โดยไฟล์ที่สร้างขึ้นมาจะถูกเก็บไว้ใน folder dist ซึ่งจะมีโครงสร้างแบบนี้ครับ

dist folder

 

 

Suratin's topics