in English

Construir eines

Apreneu a utilitzar els scripts npm inclosos de Bootstrap per crear la nostra documentació, compilar el codi font, executar proves i molt més.

Configuració d'eines

Bootstrap utilitza scripts npm per al seu sistema de compilació. El nostre package.json inclou mètodes convenients per treballar amb el marc, com ara compilar codi, executar proves i molt més.

Per utilitzar el nostre sistema de compilació i executar la nostra documentació localment, necessitareu una còpia dels fitxers font de Bootstrap i del Node. Seguiu aquests passos i hauríeu d'estar a punt per fer-ho:

  1. Baixeu i instal·leu Node.js , que fem servir per gestionar les nostres dependències.
  2. Baixeu les fonts de Bootstrap o forqueu el dipòsit de Bootstrap .
  3. Navegueu al /bootstrapdirectori arrel i executeu -lo npm installper instal·lar les nostres dependències locals que figuren a package.json .

Quan s'hagi completat, podreu executar les diferents ordres proporcionades des de la línia d'ordres.

Utilitzant scripts npm

El nostre package.json inclou les ordres i tasques següents:

Tasca Descripció
npm run dist npm run distcrea el /dist/directori amb fitxers compilats. Utilitza Sass , Autoprefixer i Terser .
npm test Executa proves localment després d'executar-senpm run dist
npm run docs-serve Construeix i executa la documentació localment.

Executeu npm runper veure tots els scripts npm.

Comenceu amb Bootstrap mitjançant npm amb el nostre projecte inicial! Dirigiu-vos al dipòsit de plantilles twbs/bootstrap-npm-starter per veure com crear i personalitzar Bootstrap al vostre propi projecte npm. Inclou el compilador Sass, l'Autoprefixer, Stylelint, PurgeCSS i les icones Bootstrap.

Sass

Bootstrap v4 utilitza Node Sass per compilar els nostres fitxers font Sass en fitxers CSS (inclosos en el nostre procés de creació). Per acabar amb el mateix CSS generat quan compileu Sass amb el vostre propi pipeline d'actius, haureu d'utilitzar un compilador Sass que admeti almenys les funcions que fa Node Sass. Això és important tenir-ho en compte perquè a partir del 26 d'octubre de 2020, LibSass i els paquets construïts a sobre, inclòs Node Sass, estan obsolets .

Si necessiteu funcions de Sass més noves o compatibilitat amb estàndards CSS més recents, Dart Sass és ara la implementació principal de Sass i admet una API de JavaScript totalment compatible amb Node Sass (amb algunes excepcions enumerades a la pàgina GitHub de Dart Sass ).

Augmentem la precisió d'arrodoniment de Sass a 6 (per defecte, és 5 a Node Sass) per evitar problemes amb l'arrodoniment del navegador. Si utilitzeu Dart Sass, això no serà una cosa que haureu d'ajustar, ja que aquest compilador utilitza una precisió d'arrodoniment de 10 i per raons d'eficiència no permet ajustar-lo.

Prefixador automàtic

Bootstrap utilitza Autoprefixer (inclòs al nostre procés de creació) per afegir automàticament prefixos de proveïdors a algunes propietats CSS en el moment de la creació. En fer-ho, ens estalviem temps i codi, ja que ens permet escriure parts clau del nostre CSS una sola vegada, alhora que elimina la necessitat de mixins de proveïdors com els que es troben a la v3.

Mantenim la llista de navegadors compatibles amb Autoprefixer en un fitxer separat dins del nostre repositori GitHub. Vegeu .browserslistrc per obtenir més informació.

Documentació local

L'execució de la nostra documentació localment requereix l'ús d'Hugo, que s'instal·la mitjançant el paquet hugo-bin npm. Hugo és un generador de llocs estàtics increïblement ràpid i bastant extensible que ens proporciona: inclou bàsiques, fitxers basats en Markdown, plantilles i molt més. A continuació s'explica com començar-ho:

  1. Executeu la configuració d'eines anterior per instal·lar totes les dependències.
  2. Des del directori arrel /bootstrap, executeu npm run docs-serve-lo a la línia d'ordres.
  3. Obriu http://localhost:9001/al vostre navegador i voilà.

Obteniu més informació sobre com utilitzar Hugo llegint la seva documentació .

Resolució de problemes

Si teniu problemes amb la instal·lació de dependències, desinstal·leu totes les versions anteriors de dependències (globals i locals). Després, torna a executar npm install.