tutorial - เพิ่มเติมใช้งานจริงกับ Gulp.js

|


แหม๋ๆหายไปนานมากๆ พอดีวุ่นๆเช่นเคยนานๆทีจะได้นั่งทำอะไรจริงๆจังๆ ก็เลยแวะมาเขียน gulp.js คือจริงๆต้องศึกษาไปใช้ในงานแต่ไปไล่อ่านเว็บหลายๆคนรู้สึกบางทีมันเบื้องต้นไป บางคนก็ฮาดคอร์แบบสุดๆ Y.Y ก็เลยเขียนเวอร์ชั่นของตัวเองไว้เพื่อเตือนความจำไว้จะมาก็อบไปแปะ ในส่วนของบทความนี้จะเป็นเกี่ยวกับการจัดการ css เท่านั้นนะครับแบบรวบรัดให้พอเข้าใจและก็อบไปใช้งานได้เลย ถ้าใครอยากได้ละเอียดๆก็ลองดูจากที่นี่ก็ได้ครับ web-dev

หากท่านยังไม่รู้จัก gulp.js หรืออาจจะรู้จักแล้วแต่ยังไม่เคยติดตั้ง ก็สามารถหาภาษาไทยเบื้องต้นอ่านได้จากเว็บ siamhtml นะครับ ตัวผมเองเริ่มต้นก็อ่านจากเว็บนี้ครับเจ๋งดี

โอเคมาเริ่มกันเลยนะครับการทำงานของผมจะเริ่มตั้งแต่

  1. คอมไฟล์ .sass เป็น css
  2. รวมไฟล์ css ที่ได้จากคอลไฟล์ sass ก่อนหน้าเป็น style.css
  3. ย่อไฟล์ style.css
  4. เปลี่ยนชื่อไฟล์เป็น style.min.css

ครับแต่ก่อนหน้านั้นดู library ที่ใช้ กันก่อนนะครับว่าเอาไว้ทำอะไรบ้าง (หรือไปดูคอนฟิคแก้ไขเพิ่มเติมได้ตามลิ้งนะครับ)

  • gulp-sass อันนี้ก็คอมไพล์ .sass หรือ .scss เป็น .css
  • gulp-concat ใช้รวมไฟล์หลายๆไฟล์ css ให้เป็นไฟล์เดียว
  • gulp-minify-css ใช้ย่อไฟล์ css
  • gulp-rename เปลี่ยนชื่อไฟล์

ครับต่อไปก็เป็นโค้ดในไฟล์ gulpfile.js นะครับ

จากโค้ดส่วนด้านบนนี้จะเห็นว่า ผมจะมีรวมการทำงานทั้งหมดเป็น task เดียวนะครับซึ่งให้ลองสังเกตบรรทัดที่ 7 ผมจะไม่เลือกเป็นแบบ *.scss เพราะมันจะไม่เรียงลำดับไฟล์ตอนรวมไฟล์ครับ ถ้าหากเราต้องการเรียงลำดับเวลา รวมไฟล์ css อันไหนขึ้นก่อนหลังก็ควรจะใช้แยกบอกเป็นไฟล์แบบในตัวอย่างนี้นะครับ ในส่วนนี้ก็แล้วแต่จะเลือกใช้นะครับ

มาลองรันกันครับนี้คือรูป ก่อนรัน gulp build (สังเกตจากไฟล์ในโฟลเดอร์จะยังไม่มีนะครับ)

beforegulp

และหลังรันผลลัพธ์ก็จะได้แบบนี้ครับ สังเกตที่ไฟล์ใน folder นะครับ ^,^

aftergulp

หวังว่าโค้ดตัวอย่างจะมีประโยชน์นะครับอาจจะไม่ครอบคลุมทุกอย่างแต่ก็น่าจะพอเป็นแนวทางปรับใช้ให้กับเพื่อนๆได้นะครับ หากผิดพลาดอะไรยังไงก็ขอโทษด้วยนะครับ ^^
เพิ่มเติม ทิ้งท้ายอีกนิดนึงนะครับก่อนจะจากกัน

นี้คือโค้ดจริงๆที่ผมทำไว้ จะมีในส่วนของการลบไฟล์ด้วย ซึ่งจะใช้ gulp-rimraf ไว้ลบไฟล์ ลบโฟลเดอร์ครับ ผมเอามาใช้ลบก่อนจะบิ้วหรือคอมไพล์อะไรครับ

ซึ่งจะเห็นว่า สามารถเลือกลบทีละหลายๆไฟล์หรือหลายๆโฟลเดอร์ก็ได้เหมือนกันครับ

Share Button

Comments

comments