เมื่อเราทำการเขียนหน้าเว็บขึ้นมาจนถึงระดับหนึ่งแล้ว เราอาจจะพบว่าการแสดงผล การโหลดมันออกจะช้า การ minified css, js ก็จะช่วยได้ในเรื่องของการลดขนาดไฟล์ ทำให้โหลดได้เร็วมากขึ้น. การ minified หรือการบีบขนาดนั้นจะไม่มีผลต่อการแสดงผลใดๆทั้งสิ้น การทำงานจะยังทำงานได้เหมือนเดิม* (ทั้งนี้ ขึ้นอยู่กับโปรแกรม minified ที่ใช้ด้วย).
สำหรับการ minified css นั้น ผมขอแนะนำให้ใช้ชุดคำสั่งของ Less ซึ่งจะทำให้งานมันง่ายขึ้น
ติดตั้ง Less
การติดตั้ง Less ผมแนะนำให้ติดตั้งผ่านทาง node.js (npm) ซึ่งจะทำให้ใช้คำสั่งติดตั้งอะไรอย่างอื่นได้อีกมาก และไม่ยากเกินไป. ก่อนเริ่ม ถ้าหากยังไม่ได้ติดตั้ง node.js (ให้ทดลองพิมพ์ npm ใน command line หากไม่พบแสดงว่ายังไม่ติดตั้ง) ให้ติดตั้ง node.js ผ่านทางลิ้งค์ต่อไปนี้ https://nodejs.org/download/
ติดตั้ง Less โดยใช้ command prompt พิมพ์คำสั่งดังต่อไปนี้
npm install less -g
อ้างอิง: http://lesscss.org/usage/#command-line-usage
การใช้งาน
การ minified css ให้เริ่มโดยใช้ command prompt เปิดเข้าไปยังโฟลเดอร์ที่มีไฟล์ css ที่ต้องการทำ minified. จากนั้นพิมพ์คำสั่งดังต่อไปนี้
lessc --clean-css="advanced" --source-map --source-map-less-inline my-development-css-file.css my-production-css-file.min.css
คำอธิบาย
lessc [options ต่างๆ] ไฟล์ต้นฉบับ.css ไฟล์ที่ส่งออก.css
คำสั่ง --clean-css="advanced" คือสั่งให้ทำการบีบอัดหรือ minified
คำสั่ง --source-map และ --source-map-less-inline เพื่อสร้างไฟล์ .map สำหรับ inspect element ทั้งนี้จากที่ทดสอบ จะพบว่ามันจะมีการคลาดเคลื่อนไปหลายบรรทัด ถ้าในไฟล์ต้นฉบับมี css comment ด้านบน.
สำหรับ option อื่นๆมากกว่านี้ โปรดดูเพิ่มเติมได้ที่ลิ้งค์อ้างอิงตามที่แสดงด้านบน.
เมื่อรันคำสั่งสำเร็จ ไฟล์ที่ส่งออก จะถูกสร้างขึ้นมา โดยเนื้อหาไฟล์ที่ส่งออกจะถูกบีบรวบเป็นบรรทัดเดียวรวดเพื่อลดขนาดไฟล์ในการโหลดผ่านเน็ต.
