อึก - พื้นฐาน
ในบทนี้คุณจะได้ทำความคุ้นเคยกับพื้นฐานบางอย่างที่เกี่ยวข้องกับอึก
Build System คืออะไร?
ระบบสร้างเรียกว่าการรวบรวมงาน (เรียกรวมกันว่า task runners) ซึ่งทำให้การทำงานซ้ำ ๆ เป็นไปโดยอัตโนมัติ
ต่อไปนี้เป็นรายการงานบางส่วนที่สามารถจัดการได้โดยใช้ระบบสร้าง -
- การรวบรวม CSS และ JavaScript ก่อนประมวลผล
- การย่อขนาดไฟล์เพื่อลดขนาดไฟล์
- การเชื่อมต่อไฟล์เข้าด้วยกัน
- ทริกเกอร์เซิร์ฟเวอร์สำหรับการโหลดซ้ำอัตโนมัติ
- การสร้างการปรับใช้บิลด์เพื่อเก็บไฟล์ผลลัพธ์ไว้ในตำแหน่งเดียว
ในเวิร์กโฟลว์ฟรอนต์เอนด์ที่ทันสมัยระบบบิวด์ทำงานโดยใช้ส่วนประกอบ 3 ส่วน -
- ผู้จัดการแพ็คเกจ
- Preprocessors
- นักวิ่งงานและสร้างเครื่องมือ
ผู้จัดการแพ็คเกจ
ใช้เพื่ออัปเกรดการติดตั้งโดยอัตโนมัติการลบการอ้างอิงที่จำเป็นไลบรารีที่สะอาดและแพ็กเกจที่ใช้ในสภาพแวดล้อมการพัฒนา ตัวอย่างสำหรับผู้จัดการแพ็คเกจ ได้แก่bower และ npm.
พรีโปรเซสเซอร์
ตัวประมวลผลล่วงหน้ามีประโยชน์อย่างมากสำหรับเวิร์กโฟลว์สมัยใหม่ที่มีประสิทธิภาพโดยการเพิ่มไวยากรณ์ที่เหมาะสมและคุณสมบัติเพิ่มเติมที่รวบรวมเป็นภาษาแม่ของมัน
พรีโพรเซสเซอร์ยอดนิยมบางตัว ได้แก่ -
CSS - SASS, LESS และ Stylus
JS - CoffeeScript, LiveScript, TypeScript ฯลฯ
HTML - Markdown, HAML, Slim, Jade ฯลฯ
นักวิ่งงาน
นักวิ่งงานจะทำให้งานต่างๆโดยอัตโนมัติเช่นการแปลง SASS เป็น CSS ลดขนาดไฟล์ปรับแต่งภาพและงานอื่น ๆ อีกมากมายที่ใช้ในเวิร์กโฟลว์การพัฒนา Gulp เป็นหนึ่งใน Task Runner ในสภาพแวดล้อมการทำงาน front-end ที่ทันสมัยและทำงานบน Node
การตั้งค่าโครงการของคุณ
ในการตั้งค่าโครงการของคุณในคอมพิวเตอร์ของคุณให้สร้างโฟลเดอร์ชื่อ "งาน" เช่น โฟลเดอร์งานประกอบด้วยโฟลเดอร์ย่อยและไฟล์ต่อไปนี้ -
Src - ตำแหน่งของไฟล์ต้นฉบับ HTML และโฟลเดอร์ที่ประมวลผลล่วงหน้า
Images - มีภาพที่ไม่มีการบีบอัด
Scripts - มีไฟล์สคริปต์ที่ประมวลผลล่วงหน้าหลายไฟล์
Styles - มีไฟล์ CSS ที่ประมวลผลล่วงหน้าหลายไฟล์
Build - โฟลเดอร์นี้จะถูกสร้างขึ้นโดยอัตโนมัติซึ่งมีไฟล์การผลิต
Images - มีภาพบีบอัด
Scripts - ไฟล์สคริปต์เดี่ยวที่มีรหัสย่อขนาด
Styles - ไฟล์ CSS เดี่ยวที่มีรหัสย่อขนาด
gulpfile.js - เป็นไฟล์กำหนดค่าที่ใช้กำหนดงานของเรา