TL;DR
ต่อจาก EP.1 ในบทความนี้จะพูดถึง Frontend Task โดยใช้ Gulp
แทนที่เราจะต้องลงโปรแกรมต่างๆ เพื่อให้เครื่องคอมสุดที่รักของเราสามารถรัน Web ได้ /me ก็ได้แนะนำให้ทุกคนเปลี่ยนมาทำงานบน VMs ใน EP.1 ไปแล้ว ซึ่งมีเครื่องมืออย่าง Vagrant มาช่วยเราจัดการความวุ่นวายบน VMs
แต่ แต่ แต่ ปัญหามันไม่ได้จบแค่นี้
เพราะปัจจุบันจะพบว่า web ไม่ใช้แค่ static content อีกต่อไป
เรามาอยู่ในจุดที่ทุกคนต้องการเวปที่มีความ dynamic
- กดตรงนั้น จะมี popup ขึ้นมา
- กดตรงนี้ จะต้องซ่อนเมนู
- ถ้าเน็ตหลุดจะทำ offline mode ได้
- มีคนทักมา จะต้องมี noti เด้งขึ้นมา
- สามารถกดแชร์ลงเฟสบุ๊คได้
- ผู้ใช้เพิ่มเนื้อหาของตัวเองได้
- และ ต้องเปิดได้ในทุกๆขนาดหน้าจอ
- บลาๆ
บางเวปไซท์สามารถแสดงผลเป็น 3D Ex
หรืออาจจะทำเป็นเรื่องราว Ex
หรือไม่ก็สามารถ interact กับผู้ใช้ได้ Ex
#โลกหมุนไปไวจนฉันตามไม่ทันแล้วพี่บัวลอย
ซึ่งเวปเหล่านี้ก็จะกลายเป็นงานที่ Web developer อย่างเราๆต้องทำ และนั้นหมายถึงการต้องใช้ภาษาเดิมๆ อย่าง javascript, css และ html ที่ไม่ได้ออกแบบมาให้สามารถทำได้ขนาดนี้ ถึงจะสามารถทำได้จริงๆ แต่ก็ต้องใช้โค้ดที่ยาก ซับซ้อนและวุ่นวาย
ดังนั้นการเขียนเวปจึงเริ่มเปลี่ยนไป เราเริ่มต้องภาษาใหม่ๆ เครื่องมือใหม่ๆเอามาทดแทนเอาไปทดแทนของเดิมที่มีอยู่แล้ว เช่น ES6, JSX, Typescript, Plug(ชื่อเดิมว่า Jade), Sass, Elm, Flow และอีกมากมาย
ซึ่งแต่ละเครื่องมือก็เข้ามาแก้ปัญหาที่แตกต่างกันออกไป เช่น
- ES6 เป็นการมาตรฐานโค้ดแบบใหม่ของ Javascript ทำให้เราสามารถจัดการ OOP ได้ง่ายขึ้น, สามารถต่อสู้กับการฟังก์ชัน Asynchronous ได้ง่ายขึ้น และ จุดเพิ่มเติมอีกมากมาย
- JSX รวมการสร้าง HTML มาอยู่บน Javascipt ทำให้เราสามารถจัดการทั้ง Model-View-Controller ได้โดยใช้แค่ .js ไม่กี่ไฟล์
- Typescript เพิ่ม variable type ให้กับ Javascript ทำให้เราสามารถตรวจสอบความผิดปกติของโค้ดได้ดีขึ้น ไม่ต้องรอให้ไปอยู่บนหน้าเวป
- Plug เปลี่ยน html ทำให้เราไม่จำเป็นต้องมี tag เปิด-ปิด อีกต่อไป โค้ด html ก็จะง่ายขึ้นมากมาย
- Sass ทำให้สามารถประกาศตัวแปรได้ใน css หรือ จะประกาศเป็น function ก็ได้เหมือนกัน
และอื่นๆอีกเยอะแยะ
ไม่เพียงแค่นั้นเครื่องมือเหล่านี้ก็มาพร้อมกับ concept การเขียนโค้ดแบบใหม่ๆให้เราใช้ อย่าง flux architure, 2-way binding, reactive programming, singlepage application, …
แต่การเครื่องมือใหม่ๆเหล่านี้ไม่สามารถใช้ได้ใน browser ปัจจุบัน แปลว่าทุกครั้งที่เราต้่องการให้โค้ดเหล่านี้แสดงผล เราต้องทำการ compile/transpile ให้มันอยู่ในรูปแบบเดิมๆ javascript, css และ html แบบเดิมๆ
และแน่นอนว่า สิ่งที่เราต้องเขียน ไม่ได้มีแค่ js ง่ายๆแค่ไฟล์เดียว อย่างโปรเจคปัจจุบัน /me เขียนไปแล้วกว่า 50 ไฟล์ และก็ต้องเป็นหน้าที่เราที่ต้อง merge ไฟล์ทั้งหมดมารวมกัน
นอกจากนี้แล้ว เพื่อการเป็น “developer ที่ดี” #ทำตัวหนา เราอาจจะต้องเขียนเทสเคส, รันเทส, ลดขนาดรูป, ย่อขนาด js และ รีเฟรชบราวเซอร์
สรุปรายการที่ /me ต้องทำหลังจากแก้โค้ด 1 ครั้ง
- compile
- merge
- test
- minify js/css
- compress image
- reload browser
เหตุนี้จึงเป็นที่มาของเครื่องมือที่ชื่อว่า Gulp //ความจริงมี Grant อีกตัว แต่ไม่เคยใช้ 555
Gulp เป็น task runner ซึ่งทำหน้าที่คอยสอดส่องไฟล์ต่างๆ และทำงานบางอย่างเมื่อเกิดการเปลี่ยนแปลงในไฟล์ที่เราต้องการ
เดิมทีแล้ว Gulp เป็นแค่ node module เล็กๆ ถ้าเราต้องการจะทำอะไร ก็ลง gulp plugin ปลั๊กเข้าไป
ทำให้ Gulp มีความยืดหยุ่น และ หลากหลาย และ โครงสร้างของ Gulp ก็ง่ายมากๆ เพราะมันใช้รูปแบบ pipline หรือ streaming โดยจะรับ input เข้ามา แล้วพ่น output ต่อๆไปเรื่อยๆ ต้องการทำอะไร ก็ส่งต่อๆกันไป เหมือน “|” ใน ubuntu
และการเริ่มใช้ Gulp ก็แค่ เริ่มต้นจากการหา gulp plugin ที่เราต้องการ อาจจะเป็น gulp-sass, gulp-minify-css, gulp-uglify, gulp-typescript และอิีกมากมาย เอาเป็นว่า น่าจะมีทุกอย่างที่ต้องการ
หลัังจากนั้น ก็นิยาม task, watch และ default
โดย task คืองานที่ต้องการให้ gulp ทำ, watch คือ การกำหนดให้ gulp จับตาดูไฟล์ที่กำหนดไว้ เมื่อมีการเปลี่ยนแปลงก็จะให้ทำ task ที่เราต้องการ และ default คือ task ที่จะเร่ิมทำทุกครั้งที่รัน gulp
และสุดท้าย ก็ gulp ซะ
แค่นี้ ก็ไม่ต้องไปคิดเรื่อง compile หรือ reload browser อีกต่อไป #ชีวิตดี๊ดี
และทั้งหมดนี้ ก็คือสรุปหัวข้อบรรยาย “Set Environment for Web Developer” โดย /me ยังไงก็ขอขอบคุณที่อ่านมาถึงจุดนี้ เย้ๆๆ แล้วมาแบ่งปันความรู้กันอีกนะ