דלג לתוכן הראשי דלג לניווט במסמכים
in English

בניית כלים

למד כיצד להשתמש בתסריטי npm הכלולים של Bootstrap כדי לבנות את התיעוד שלנו, להדר קוד מקור, להריץ בדיקות ועוד.

בעמוד זה

הגדרת כלי עבודה

Bootstrap משתמש בסקריפטים של npm עבור מערכת הבנייה שלה. ה- package.json שלנו כולל שיטות נוחות לעבודה עם המסגרת, כולל קומפילציה של קוד, הפעלת בדיקות ועוד.

כדי להשתמש במערכת הבנייה שלנו ולהפעיל את התיעוד שלנו באופן מקומי, תזדקק לעותק של קובצי המקור והצומת של Bootstrap. בצע את השלבים הבאים ואתה אמור להיות מוכן לרוק:

  1. הורד והתקן את Node.js , שבו אנו משתמשים כדי לנהל את התלות שלנו.
  2. או להוריד את המקורות של Bootstrap או לחלק את המאגר של Bootstrap .
  3. נווט אל ספריית השורש /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 דרך npm עם פרויקט ההתחלה שלנו! עבור אל מאגר התבניות twbs/bootstrap-npm-starter כדי לראות כיצד לבנות ולהתאים אישית את Bootstrap בפרויקט npm משלך. כולל מהדר Sass, Autoprefixer, Stylelint, PurgeCSS ואייקוני Bootstrap.

סאס

Bootstrap משתמש ב- Dart Sass כדי להרכיב את קובצי המקור של Sass לקובצי CSS (הכלולים בתהליך הבנייה שלנו), ואנו ממליצים לעשות את אותו הדבר אם אתה מרכיב את Sass באמצעות צינור הנכסים שלך. השתמשנו בעבר ב-Node Sass עבור Bootstrap v4, אבל LibSass וחבילות שנבנו עליו, כולל Node Sass, הוצאו משימוש כעת .

Dart Sass משתמש בדיוק עיגול של 10 ומטעמי יעילות אינו מאפשר התאמה של ערך זה. אנחנו לא מורידים את הדיוק הזה במהלך עיבוד נוסף של ה-CSS שנוצר שלנו, כגון במהלך הקטנה, אבל אם בחרת לעשות זאת, אנו ממליצים לשמור על דיוק של לפחות 6 כדי למנוע בעיות בעגול דפדפן.

Autoprefixer

Bootstrap משתמש ב- Autoprefixer (כלול בתהליך הבנייה שלנו) כדי להוסיף אוטומטית קידומות של ספקים לחלק ממאפייני ה-CSS בזמן הבנייה. פעולה זו חוסכת לנו זמן וקוד בכך שהיא מאפשרת לנו לכתוב חלקים מרכזיים מה-CSS שלנו פעם אחת תוך ביטול הצורך במיקסינים של ספקים כמו אלה שנמצאים ב-v3.

אנו שומרים על רשימת הדפדפנים הנתמכים באמצעות Autoprefixer בקובץ נפרד בתוך מאגר GitHub שלנו. ראה .browserslistrc לפרטים.

RTLCSS

Bootstrap משתמש ב- RTLCSS כדי לעבד CSS מהידור ולהמיר אותם ל-RTL - בעצם מחליף מאפיינים מודעים לכיוון אופקי (למשל padding-left) בהיפך שלהם. זה מאפשר לנו לכתוב את ה-CSS שלנו פעם אחת בלבד ולבצע שינויים קלים באמצעות הוראות שליטה וערך של RTLCSS .

תיעוד מקומי

הפעלת התיעוד שלנו מקומית דורשת שימוש ב-Hugo, המותקן באמצעות חבילת hugo-bin npm. הוגו הוא מחולל אתרים סטטי מהיר להפליא וניתן להרחבה המספק לנו: כולל כולל, קבצים מבוססי Markdown, תבניות ועוד. הנה איך להתחיל את זה:

  1. הפעל את הגדרת הכלים שלמעלה כדי להתקין את כל התלות.
  2. מספריית השורש /bootstrap, הפעל npm run docs-serveבשורת הפקודה.
  3. פתח http://localhost:9001/בדפדפן שלך, והרי.

למד עוד על השימוש בהוגו על ידי קריאת התיעוד שלו .

פתרון תקלות

אם תיתקל בבעיות בהתקנת תלות, הסר את כל גרסאות התלות הקודמות (גלובליות ומקומיות). לאחר מכן, הפעל מחדש npm install.