Ir ao contido principal Ir á navegación de documentos
in English

Construír ferramentas

Aprende a usar os scripts npm incluídos de Bootstrap para crear a nosa documentación, compilar código fonte, realizar probas e moito máis.

Nesta páxina

Configuración de ferramentas

Bootstrap usa scripts npm para o seu sistema de compilación. O noso package.json inclúe métodos cómodos para traballar co cadro, incluíndo a compilación de código, a realización de probas e moito máis.

Para usar o noso sistema de compilación e executar a nosa documentación localmente, necesitarás unha copia dos ficheiros fonte de Bootstrap e de Node. Sigue estes pasos e deberías estar preparado para xogar:

  1. Descarga e instala Node.js , que usamos para xestionar as nosas dependencias.
  2. Descarga as fontes de Bootstrap ou fork o repositorio de Bootstrap .
  3. Navegue ata o directorio raíz /bootstrape execute npm installpara instalar as nosas dependencias locais listadas en package.json .

Cando remate, poderás executar os distintos comandos proporcionados desde a liña de comandos.

Usando scripts npm

O noso package.json inclúe numerosas tarefas para desenvolver o proxecto. Executa npm runpara ver todos os scripts npm no teu terminal. As tarefas primarias inclúen:

Tarefa Descrición
npm start Compila CSS e JavaScript, crea a documentación e inicia un servidor local.
npm run dist Crea o dist/directorio con ficheiros compilados. Require Sass , Autoprefixer e Terser .
npm test Realiza probas localmente despois de executarnpm run dist
npm run docs-serve Crea e executa a documentación localmente.
Comeza con Bootstrap a través de npm co noso proxecto de inicio! Diríxete ao repositorio de modelos twbs/bootstrap-npm-starter para ver como crear e personalizar Bootstrap no teu propio proxecto npm. Inclúe o compilador Sass, o prefixo automático, as iconas Stylelint, PurgeCSS e Bootstrap.

Sass

Bootstrap usa Dart Sass para compilar os nosos ficheiros fonte Sass en ficheiros CSS (incluídos no noso proceso de compilación) e recomendámosche que fagas o mesmo se estás a compilar Sass usando o teu propio pipeline de activos. Anteriormente usabamos Node Sass para Bootstrap v4, pero LibSass e os paquetes construídos sobre el, incluído Node Sass, agora están en desuso .

Dart Sass usa unha precisión de redondeo de 10 e por razóns de eficiencia non permite axustar este valor. Non reducimos esta precisión durante o procesamento posterior do noso CSS xerado, como durante a minificación, pero se optas por facelo, recomendamos manter unha precisión de polo menos 6 para evitar problemas co redondeo do navegador.

Autoprefixador

Bootstrap usa Autoprefixer (incluído no noso proceso de compilación) para engadir automaticamente prefixos de provedores a algunhas propiedades CSS no momento da compilación. Facelo afórranos tempo e código ao permitirnos escribir partes clave do noso CSS unha soa vez ao tempo que eliminamos a necesidade de mesturas de provedores como as que se atopan na versión 3.

Mantemos a lista de navegadores compatibles con Autoprefixer nun ficheiro separado dentro do noso repositorio de GitHub. Consulte .browserslistrc para obter máis información.

RTLCSS

Bootstrap usa RTLCSS para procesar CSS compilados e convertelos en RTL, substituíndo basicamente as propiedades de orientación horizontal (por exemplo, padding-left) polas súas opostas. Permítenos só escribir o noso CSS unha soa vez e facer pequenos axustes usando directivas de control e valor RTLCSS .

Documentación local

A execución da nosa documentación localmente require o uso de Hugo, que se instala mediante o paquete hugo-bin npm. Hugo é un xerador de sitios estáticos moi rápido e bastante extensible que nos proporciona: inclusións básicas, ficheiros baseados en Markdown, modelos e moito máis. Aquí tes como comezalo:

  1. Execute a configuración de ferramentas anterior para instalar todas as dependencias.
  2. Desde o directorio raíz /bootstrap, execute npm run docs-servena liña de comandos.
  3. Abre http://localhost:9001/no teu navegador e listo.

Obtén máis información sobre o uso de Hugo lendo a súa documentación .

Solución de problemas

Se atopas problemas coa instalación de dependencias, desinstala todas as versións anteriores de dependencias (globais e locais). Despois, volve executar npm install.