Construir herramientas
Aprenda a usar los scripts npm incluidos de Bootstrap para crear nuestra documentación, compilar el código fuente, ejecutar pruebas y más.
Configuración de herramientas
Bootstrap usa scripts npm para su sistema de compilación. Nuestro paquete.json incluye métodos convenientes para trabajar con el marco, incluida la compilación de código, la ejecución de pruebas y más.
Para usar nuestro sistema de compilación y ejecutar nuestra documentación localmente, necesitará una copia de los archivos fuente de Bootstrap y Node. Siga estos pasos y debería estar listo para rockear:
- Descargue e instale Node.js , que usamos para administrar nuestras dependencias.
- Descargue las fuentes de Bootstrap o bifurque el repositorio de Bootstrap .
- Navegue hasta el directorio raíz
/bootstrapy ejecutenpm installpara instalar nuestras dependencias locales enumeradas en package.json .
Cuando haya terminado, podrá ejecutar los diversos comandos proporcionados desde la línea de comandos.
Uso de secuencias de comandos npm
Nuestro paquete.json incluye los siguientes comandos y tareas:
| Tarea | Descripción |
|---|---|
npm run dist |
npm run distcrea el /dist/directorio con archivos compilados. Utiliza Sass , Autoprefixer y terser . |
npm test |
Ejecuta pruebas localmente después de ejecutarnpm run dist |
npm run docs-serve |
Construye y ejecuta la documentación localmente. |
Ejecute npm runpara ver todos los scripts de npm.
Hablar con descaro a
Bootstrap v4 usa Node Sass para compilar nuestros archivos fuente Sass en archivos CSS (incluidos en nuestro proceso de compilación). Para terminar con el mismo CSS generado al compilar Sass usando su propia canalización de activos, deberá usar un compilador de Sass que admita al menos las funciones que admite Node Sass. Es importante tener esto en cuenta porque a partir del 26 de octubre de 2020, LibSass y los paquetes construidos sobre él, incluido Node Sass, están obsoletos .
Si necesita funciones Sass más nuevas o compatibilidad con los estándares CSS más nuevos, Dart Sass es ahora la implementación principal de Sass y admite una API de JavaScript que es totalmente compatible con Node Sass (con algunas excepciones enumeradas en la página GitHub de Dart Sass ).
Aumentamos la precisión de redondeo de Sass a 6 (de manera predeterminada, es 5 en Node Sass) para evitar problemas con el redondeo del navegador. Si usa Dart Sass, esto no será algo que necesite ajustar, ya que ese compilador usa una precisión de redondeo de 10 y, por razones de eficiencia, no permite que se ajuste.
autoprefijador
Bootstrap usa Autoprefixer (incluido en nuestro proceso de compilación) para agregar automáticamente prefijos de proveedores a algunas propiedades de CSS en el momento de la compilación. Hacerlo nos ahorra tiempo y código al permitirnos escribir partes clave de nuestro CSS una sola vez y eliminar la necesidad de combinaciones de proveedores como las que se encuentran en v3.
Mantenemos la lista de navegadores admitidos a través de Autoprefixer en un archivo separado dentro de nuestro repositorio de GitHub. Ver .browserslistrc para más detalles.
Documentación local
Ejecutar nuestra documentación localmente requiere el uso de Hugo, que se instala a través del paquete hugo-bin npm. Hugo es un generador de sitios estáticos increíblemente rápido y bastante extensible que nos proporciona: inclusiones básicas, archivos basados en Markdown, plantillas y más. Así es como se pone en marcha:
- Ejecute la configuración de herramientas anterior para instalar todas las dependencias.
- Desde el directorio raíz
/bootstrap, ejecutenpm run docs-serveen la línea de comandos. - Ábrelo
http://localhost:9001/en tu navegador y listo.
Obtenga más información sobre el uso de Hugo leyendo su documentación .
Solución de problemas
Si encuentra problemas con la instalación de dependencias, desinstale todas las versiones de dependencia anteriores (globales y locales). Luego, vuelva a ejecutar npm install.