gulp

พัฒนา Twitter Bootstrap 4 ด้วย Gulp และ Node.js

Gulp คืออะไร

Gulp เป็นเครื่องมือที่ใช้สำหรับ การ  compile sass/less ที่นำมาใช้งานสำหรับการพัฒนาร่วมกับ Twitter bootstrap 4 ได้อย่างง่ายดาย พร้อมกับสามารถใช้งานร่วมกับ browser-sync ทำให้  browser สามารถแสดงผลทันทีไม่ต้องทำการ reload ก่อนการใช้งาน Gulp จะต้องทำการติดตั้ง Node.js ให้เรียบร้อยก่อนดังนี้

ติดตั้ง Node, NPM บน mac ผ่านทาง brew

ติดตั้ง node บน Fedora

หลังจากติดตั้ง ให้ติดตั้ง Gulp ให้เป็น –global

สร้าง bootstrap4 folder เพื่อให้ทำหน้าที่เป็น Project folder สามารถตั้งชื่อเป็นชื่ออะไรก็ได้ ตามที่ต้องการ

สร้าง package.json ด้วย คำสั่ง npm init -y

ติดตั้ง node package

ติดตั้ง node package

เตรียมไฟล์ gulpfile.js ดังนี้

ต่อมาสร้างไฟล์ index.html เพื่อใช้งาน css และ js ที่ build จาก gulp

Build Gulp

 

Tags: No tags