อึก - พื้นฐาน

ในบทนี้คุณจะได้ทำความคุ้นเคยกับพื้นฐานบางอย่างที่เกี่ยวข้องกับอึก

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 - เป็นไฟล์กำหนดค่าที่ใช้กำหนดงานของเรา