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.

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:

Descarga e instala Node.js , que usamos para xestionar as nosas dependencias.
Descarga as fontes de Bootstrap ou fork o repositorio de Bootstrap .
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 os seguintes comandos e tarefas:

Tarefa	Descrición
`npm run dist`	`npm run dist`crea o `/dist/`directorio con ficheiros compilados. Usa Sass , Autoprefixer e Terser .
`npm test`	Realiza probas localmente despois de executar`npm run dist`
`npm run docs-serve`	Crea e executa a documentación localmente.

Executar npm runpara ver todos os scripts npm.

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 v4 usa Node Sass para compilar os nosos ficheiros fonte Sass en ficheiros CSS (incluídos no noso proceso de compilación). Para acabar co mesmo CSS xerado ao compilar Sass usando o teu propio pipeline de activos, terás que usar un compilador Sass que admita polo menos as funcións que fai Node Sass. É importante ter en conta que a partir do 26 de outubro de 2020, LibSass e os paquetes construídos sobre el, incluído Node Sass, están obsoletos .

Se precisas funcións de Sass máis recentes ou compatibilidade con estándares CSS máis novos, Dart Sass é agora a implementación principal de Sass e admite unha API de JavaScript totalmente compatible con Node Sass (con algunhas excepcións listadas na páxina de GitHub de Dart Sass ).

Aumentamos a precisión de redondeo de Sass a 6 (por defecto, é 5 en Node Sass) para evitar problemas co redondeo do navegador. Se usas Dart Sass, isto non será algo que teñas que axustar, xa que ese compilador usa unha precisión de redondeo de 10 e por razóns de eficiencia non permite axustalo.

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.

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:

Execute a configuración de ferramentas anterior para instalar todas as dependencias.
Desde o directorio raíz /bootstrap, executa npm run docs-servena liña de comandos.
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.