เครื่องมือสร้าง
เรียนรู้วิธีใช้สคริปต์ npm ของ Bootstrap เพื่อสร้างเอกสารประกอบ คอมไพล์ซอร์สโค้ด เรียกใช้การทดสอบ และอื่นๆ
การตั้งค่าเครื่องมือ
Bootstrap ใช้สคริปต์ npmสำหรับระบบ บิลด์ package.jsonของเรามีวิธีการที่สะดวกในการทำงานกับเฟรมเวิร์ก รวมถึงการคอมไพล์โค้ด การทดสอบการทำงาน และอื่นๆ
ในการใช้ระบบบิลด์ของเราและเรียกใช้เอกสารของเราในเครื่อง คุณจะต้องมีสำเนาของไฟล์ต้นทางของ Bootstrap และ Node.js ทำตามขั้นตอนเหล่านี้และคุณควรพร้อมที่จะเขย่า:
- ดาวน์โหลดและติดตั้ง Node.jsซึ่งเราใช้ในการจัดการการขึ้นต่อกันของเรา
- ดาวน์โหลดซอร์สของ Bootstrapหรือfork ที่เก็บ Bootstrap
- ไปที่
/bootstrapไดเร็กทอรีรูทและรันnpm installเพื่อติดตั้งการขึ้นต่อกันในเครื่องของเราที่แสดงอยู่ในpackage.json
เมื่อเสร็จแล้ว คุณจะสามารถเรียกใช้คำสั่งต่างๆ ที่ให้มาจากบรรทัดคำสั่งได้
การใช้สคริปต์ npm
package.jsonของเรามีงานมากมายในการพัฒนาโครงการ เรียกใช้npm runเพื่อดูสคริปต์ npm ทั้งหมดในเทอร์มินัลของคุณ งานหลัก ได้แก่ :
| งาน | คำอธิบาย |
|---|---|
npm start |
คอมไพล์ CSS และ JavaScript สร้างเอกสาร และเริ่มเซิร์ฟเวอร์ในเครื่อง |
npm run dist |
สร้างdist/ไดเร็กทอรีด้วยไฟล์ที่คอมไพล์แล้ว ต้องใช้Sass , Autoprefixerและterser |
npm test |
รันการทดสอบในเครื่องหลังจากรันnpm run dist |
npm run docs-serve |
สร้างและรันเอกสารในเครื่อง |
ซาส
Bootstrap ใช้Dart Sassเพื่อรวบรวมไฟล์ต้นฉบับ Sass ของเราเป็นไฟล์ CSS (รวมอยู่ในกระบวนการสร้างของเรา) และเราขอแนะนำให้คุณทำเช่นเดียวกันหากคุณกำลังรวบรวม Sass โดยใช้ไปป์ไลน์สินทรัพย์ของคุณเอง ก่อนหน้านี้เราใช้ Node Sass สำหรับ Bootstrap v4 แต่ LibSass และแพ็คเกจที่สร้างขึ้นด้านบน ซึ่งรวมถึง Node Sass เลิกใช้งานแล้ว
Dart Sass ใช้ความแม่นยำในการปัดเศษ 10 และด้วยเหตุผลด้านประสิทธิภาพจึงไม่อนุญาตให้ปรับค่านี้ เราไม่ลดความแม่นยำนี้ระหว่างการประมวลผล CSS ที่เราสร้างขึ้นเพิ่มเติม เช่น ระหว่างการลดขนาด แต่ถ้าคุณเลือกที่จะลด เราขอแนะนำให้รักษาความแม่นยำไว้อย่างน้อย 6 เพื่อป้องกันปัญหาการปัดเศษของเบราว์เซอร์
คำนำหน้าอัตโนมัติ
Bootstrap ใช้Autoprefixer (รวมอยู่ในกระบวนการสร้างของเรา) เพื่อเพิ่มคำนำหน้าผู้ขายให้กับคุณสมบัติ CSS บางอย่างโดยอัตโนมัติในเวลา บิลด์ การทำเช่นนี้ช่วยเราประหยัดเวลาและโค้ดโดยทำให้เราเขียนส่วนสำคัญของ CSS ได้ในครั้งเดียว โดยไม่จำเป็นต้องใช้มิกซ์อินของผู้ขายเหมือนกับที่พบใน v3
เรารักษารายการเบราว์เซอร์ที่รองรับผ่าน Autoprefixer ในไฟล์แยกต่างหากภายในที่เก็บ GitHub ของเรา ดู.browserslistrcสำหรับรายละเอียด
RTLCSS
Bootstrap ใช้RTLCSSเพื่อประมวลผล CSS ที่คอมไพล์แล้วแปลงเป็น RTL โดยพื้นฐานแล้วจะแทนที่คุณสมบัติการรับรู้ทิศทางแนวนอน (เช่นpadding-left) ด้วยสิ่งที่ตรงกันข้าม ซึ่งช่วยให้เราเขียน CSS ได้เพียงครั้งเดียว และทำการปรับแต่งเล็กน้อยโดยใช้การควบคุม RTLCSS และคำสั่งมูลค่า
เอกสารท้องถิ่น
การเรียกใช้เอกสารของเราในเครื่องต้องใช้ Hugo ซึ่งได้รับการติดตั้งผ่าน แพ็คเกจ Hugo-bin npm Hugo เป็นโปรแกรมสร้างไซต์แบบสแตติกที่รวดเร็วและขยายได้อย่างเห็นได้ชัด ซึ่งมอบ: การรวมพื้นฐาน ไฟล์ที่ใช้ Markdown เทมเพลต และอื่นๆ วิธีเริ่มต้นมีดังนี้
- เรียกใช้การตั้งค่าเครื่องมือด้านบนเพื่อติดตั้งการพึ่งพาทั้งหมด
- จากไดเร็กทอรี root
/bootstrapให้รันnpm run docs-serveในบรรทัดคำสั่ง - เปิด
http://localhost:9001/ในเบราว์เซอร์ของคุณและ voila
เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Hugo โดยอ่านเอกสารประกอบ
การแก้ไขปัญหา
หากคุณประสบปัญหาในการติดตั้งการพึ่งพา ให้ถอนการติดตั้งเวอร์ชันการพึ่งพาก่อนหน้าทั้งหมด (ทั่วโลกและในเครื่อง) แล้วรันnpm installใหม่