โลกของ Web Frontend ทุกวันนี้มีเครื่องไม้เครื่องมือต่างๆ ให้ใช้เยอะมาก ตามแทบไม่ทัน วันนี้จะมาแนะนำเครื่องมื่อที่ในการใช้สร้างโครงของ Web Application จากความสามารถของ Node.js กันครับ
Node.js พูดง่ายๆ ก็คือการเขียนโปรแกรมด้วย javascript แหล่ะครับ ซึ่ง node.js นั้นมี module ต่างๆ ให้เราได้เลือกใช้มากมาย การติดตั้ง node.js ก็เข้าไปดาวน์โหลดแล้วติดตั้งได้ที่
ส่วนการติดตั้ง module ต่างๆ ก็สามารถพิมพ์คำสั่งลงใน terminal, cmd ได้เลยครับ
ติดตั้ง Module ภายใน directory นั้น
[shell]npm install <package name>[/shell]
ติดตั้ง Module แบบ Global ในเครื่อง
[shell]npm install -g <package name>[/shell]
ส่วน module ที่เราจะใช้งานวันนี้จะมี Yeoman, Bower และ Grunt มาดูกันว่าแต่ละตัวคืออะไร แล้วทำหน้าที่อะไรกัน
Yeoman คือเครื่องมือที่ใช้สำหรับสร้างโครงสร้างของ application เรียกอีกอย่างหนึ่งว่า generator
Bower คือเครื่องมือที่ใช้ในการจัดการ package ต่างๆ ของ application อย่างเช่น bootstrap, jquery เป็นต้น
Grunt คือ task runner เป็นเครื่องมือในการทำ task ซึ่งเราสามารถเพิ่ม task ต่างๆ เข้าไปให้ได้เช่น การ build ที่จะทำให้เกิดการ minify พวก CSS, JS หรือการรัน test ตรวจสอบความถูกต้องของ syntax ของ html, css, js เป็นต้น
ติดตั้ง yeoman, bower, grunt
[shell]npm install yeoman, bower, grunt-cli, generator-webapp
[/shell]
การใช้งานในการสร้าง Web Application
1. ใช้ yeoman เรียก webapp generator
[shell]
mkdir mywebapp && cd $_
yo
[/shell]
จะเจอหน้าตาแบบนี้ และทำการเลือกที่ Webapp
2. จะมีหน้าตาให้เราเลือก framework ที่จะใช้ ผมจะเลือกใช้ Bootstrap แล้วกัน
3. หลังจากนั้น yo จะไปรัน bower install ให้อัตโนมัติ เราก็แค่รอให้มันเสร็จครับ
4. ถ้าเสร็จแล้ว folder เราจะมีลักษณะเช่นนี้
5. ลองรัน ตัว nodejs ก็จะเปิด web browser ใหม่ขึ้นมาให้ครับ ถ้าเราแก้ไขอะไรที่ตัวไฟล์ หน้านั้นก็จะโดน refresh อัตโนมัติครับ
เห็นไหมหล่ะครับ ง่ายนิดเดียวเลย หลังจากนี้เราก็แก้ไข JS, HTML5, CSS3 ตามสไตล์ของเราได้เลย สะดวกจริงๆ ครับ
