A contribui
Ajutați la dezvoltarea Bootstrap cu scripturile și testele noastre de compilare a documentației.
Configurarea sculelor
Bootstrap folosește scripturi npm pentru a construi documentația și a compila fișierele sursă. Package.json nostru găzduiește aceste scripturi pentru compilarea codului, rularea testelor și multe altele. Acestea nu sunt destinate utilizării în afara depozitului și documentației noastre.
Pentru a utiliza sistemul nostru de compilare și a rula documentația noastră la nivel local, veți avea nevoie de o copie a fișierelor sursă Bootstrap și a Node. Urmați acești pași și ar trebui să fiți gata să vă rockați:
- Descărcați și instalați Node.js , pe care îl folosim pentru a ne gestiona dependențele.
- Fie descărcați sursele Bootstrap, fie accesați depozitul Bootstrap .
- Navigați la
/bootstrapdirectorul rădăcină și rulaținpm installpentru a instala dependențele noastre locale enumerate în package.json .
Când ați terminat, veți putea rula diferitele comenzi furnizate din linia de comandă.
Folosind scripturi npm
Package.json nostru include numeroase sarcini pentru dezvoltarea proiectului. Rulați npm runpentru a vedea toate scripturile npm din terminalul dvs. Sarcinile principale includ:
| Sarcină | Descriere |
|---|---|
npm start |
Compilează CSS și JavaScript, construiește documentația și pornește un server local. |
npm run dist |
Creează dist/directorul cu fișiere compilate. Necesită Sass , Autoprefixer și Terser . |
npm test |
Rulează teste local după rularenpm run dist |
npm run docs-serve |
Construiește și rulează documentația local. |
Sass
Bootstrap folosește Dart Sass pentru compilarea fișierelor noastre sursă Sass în fișiere CSS (incluse în procesul nostru de compilare) și vă recomandăm să faceți același lucru dacă compilați Sass folosind propriul canal de active. Am folosit anterior Node Sass pentru Bootstrap v4, dar LibSass și pachetele construite pe deasupra, inclusiv Node Sass, sunt acum depreciate .
Dart Sass folosește o precizie de rotunjire de 10 și din motive de eficiență nu permite ajustarea acestei valori. Nu scădem această precizie în timpul procesării ulterioare a CSS-ului nostru generat, cum ar fi în timpul minimizării, dar dacă alegeți să faceți acest lucru, vă recomandăm să mențineți o precizie de cel puțin 6 pentru a preveni problemele legate de rotunjirea browserului.
Autoprefixer
Bootstrap folosește Autoprefixer (inclus în procesul nostru de construire) pentru a adăuga automat prefixe de furnizor la unele proprietăți CSS în timpul construirii. Procedând astfel, ne economisim timp și cod, permițându-ne să scriem părți cheie ale CSS-ului nostru o singură dată, eliminând în același timp nevoia de mix-uri de furnizori precum cele găsite în v3.
Menținem lista de browsere acceptate prin Autoprefixer într-un fișier separat din depozitul nostru GitHub. Consultați .browserslistrc pentru detalii.
RTLCSS
Bootstrap folosește RTLCSS pentru a procesa CSS compilat și a le converti în RTL - în principiu, înlocuind proprietățile de direcție orizontală (de ex. padding-left) cu opusul lor. Ne permite să scriem CSS-ul nostru o singură dată și să facem modificări minore folosind directivele de control și valori RTLCSS .
Documentatie locala
Rularea documentației noastre la nivel local necesită utilizarea Hugo, care se instalează prin pachetul hugo-bin npm. Hugo este un generator de site-uri static uluitor de rapid și destul de extensibil, care ne oferă: include de bază, fișiere bazate pe Markdown, șabloane și multe altele. Iată cum să începeți:
- Executați configurarea instrumentelor de mai sus pentru a instala toate dependențele.
- Din directorul rădăcină
/bootstrap, rulaținpm run docs-serveîn linia de comandă. - Deschideți
http://localhost:9001/în browser și voilà.
Aflați mai multe despre utilizarea Hugo citind documentația acestuia .
Depanare
Dacă întâmpinați probleme cu instalarea dependențelor, dezinstalați toate versiunile anterioare ale dependențelor (global și local). Apoi, reluați npm install.