แนะนำ Gulp 4

Gulp เป็นเครื่องมือสำหรับทำให้งานที่เกิดขึ้นบ่อยๆ ในการพัฒนาเว็บไซต์เป็นไปโดยอัตโนมัติ: เช่น การย่อขนาดไฟล์ CSS และ JavaScript, การรวมไฟล์หลายไฟล์เป็นไฟล์เดียว, การแปลง LESS และ SASS เป็น CSS, การแปลงภาษา TypeScript เป็น JavaScript และงานในลักษณะนี้

หลักการทำงานของมันมีดังนี้: สำหรับระบบ Gulp จะมีการเขียนงาน (task) ขึ้นมา จากนั้น Gulp จะทำงานเหล่านั้นตามลำดับที่กำหนด

มาเริ่มติดตั้ง Gulp กัน สำหรับสิ่งนี้ในบรรทัดคำสั่งจำเป็นต้องรันคำสั่ง:

npm install --global gulp-cli

ตอนนี้เรามาสร้างโปรเจกต์ที่จะใช้งาน Gulp กัน สำหรับสิ่งนี้ในโฟลเดอร์โปรเจกต์ให้สร้างโครงสร้างไฟล์ดังต่อไปนี้:

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

นอกจากนี้ในโฟลเดอร์โปรเจกต์จำเป็นต้องเพิ่มไฟล์ package.json, หลังจากนั้นจึงสามารถติดตั้ง Gulp ในโปรเจกต์ได้ สำหรับสิ่งนี้ในบรรทัดคำสั่ง โดยอยู่ใน โฟลเดอร์โปรเจกต์ จำเป็นต้องรันคำสั่งต่อไปนี้:

npm install --save-dev gulp

สร้างโปรเจกต์และติดตั้ง Gulp ลงในนั้น