in English

Construiește instrumente

Aflați cum să utilizați scripturile npm incluse în Bootstrap pentru a construi documentația noastră, a compila codul sursă, a rula teste și multe altele.

Configurarea sculelor

Bootstrap folosește scripturi npm pentru sistemul său de construcție. Package.json include metode convenabile de lucru cu cadrul, inclusiv compilarea codului, rularea testelor și multe altele.

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:

  1. Descărcați și instalați Node.js , pe care îl folosim pentru a ne gestiona dependențele.
  2. Fie descărcați sursele Bootstrap, fie accesați depozitul Bootstrap .
  3. Navigați la /bootstrapdirectorul rădăcină și rulați npm 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 următoarele comenzi și sarcini:

Sarcină Descriere
npm run dist npm run distcreează /dist/directorul cu fișiere compilate. Utilizează Sass , Autoprefixer și Terser .
npm test Rulează teste local după rularenpm run dist
npm run docs-serve Construiește și rulează documentația local.

Rulați npm runpentru a vedea toate scripturile npm.

Începeți cu Bootstrap prin npm cu proiectul nostru de pornire! Mergeți la depozitul de șabloane twbs/bootstrap-npm-starter pentru a vedea cum să construiți și să personalizați Bootstrap în propriul proiect npm. Include compilator Sass, Autoprefixer, Stylelint, PurgeCSS și pictograme Bootstrap.

Sass

Bootstrap v4 folosește Node Sass pentru compilarea fișierelor noastre sursă Sass în fișiere CSS (incluse în procesul nostru de construire). Pentru a ajunge cu același CSS generat atunci când compilați Sass folosind propria conductă de active, va trebui să utilizați un compilator Sass care acceptă cel puțin caracteristicile pe care le face Node Sass. Este important de remarcat acest lucru deoarece, începând cu 26 octombrie 2020, LibSass și pachetele construite pe deasupra — inclusiv Node Sass — sunt depreciate .

Dacă aveți nevoie de funcții Sass mai noi sau compatibilitate cu standardele CSS mai noi, Dart Sass este acum implementarea principală a Sass și acceptă un API JavaScript care este pe deplin compatibil cu Node Sass (cu câteva excepții enumerate pe pagina GitHub a lui Dart Sass ).

Creștem precizia de rotunjire Sass la 6 (în mod implicit, este 5 în Node Sass) pentru a preveni problemele cu rotunjirea browserului. Dacă utilizați Dart Sass, acest lucru nu va fi ceva ce trebuie ajustat, deoarece acel compilator folosește o precizie de rotunjire de 10 și, din motive de eficiență, nu permite ajustarea acestuia.

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, cum ar fi 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.

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:

  1. Executați configurarea instrumentelor de mai sus pentru a instala toate dependențele.
  2. Din directorul rădăcină /bootstrap, rulați npm run docs-serveîn linia de comandă.
  3. 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 la instalarea dependențelor, dezinstalați toate versiunile anterioare de dependențe (global și local). Apoi, reluați npm install.