¡Grandes noticias! Hemos minificado y combinado todo nuestro CSS en un solo archivo. Oh, ¡excepto el CSS de Bootstrap! Tenemos dos buenas opciones. Primero, podríamos apuntar el enlace a un CDN público de Bootstrap. O podríamos meter el estilo de Bootstrap directamente en main.css. Hagamos eso – es mucho más interesante.
¡Bower!
Bootstrap está instalado gracias a Bowser. Um, quiero decir bower. Bower es el compositor de activos de frontend, como Bootstrap o jQuery. Es una alternativa a la descarga de los archivos y la confirmación de ellos a su repo.
Bower lee de, ¡sorpresa!, un archivo bower.json:
Y cuando creé el proyecto, también añadí un archivo .bowerrc. Esto le dijo a bower que descargara cosas en este directorio web/vendor:
Eso hace que sean accesibles públicamente.
Pero ahora que tenemos el músculo de Gulp, quiero complicar las cosas. Cambiar esto para ser vendor/bower_components:
Eso pondrá estos archivos fuera del directorio público, lo que al principio, causará algunos problemas. Elimina ese material antiguo:
rm -rf web/vendorDirígete a la terminal y haz ctrl+c para salir de Gulp. Ahora, ejecuta bower install:
bower installSi no tienes el comando bower, consulta su documentación. Se instala globalmente a través de npm, exactamente igual que gulp.
¡Hecho! Ahora, en mi directorio vendor/ tengo una hermosa carpeta bower_components.
Añadir archivos CSS a nuestro flujo de estilos Gulp
Pero aunque quisiera tener 2 etiquetas de enlace separadas en mi diseño, no puedo:Bootstrap ya no llama al directorio web/ hogar. ¡Por lo tanto, deshacerse de su etiqueta de enlace.
En gulpfile.js, vamos a tratar de arreglar las cosas! Empezaré añadiendo una nueva variable de configuración llamada bowerDir, porque va a ser muy común referirse a cosas en ese directorio. Ponlo en vendor/bower_components:
Si abres ese directorio, puedes ver dónde vive el archivo bootstrap.css. Fíjate que no es un archivo Sass, sino un CSS normal y corriente. En realidad hay una versión de Sass de Bootstrap, y puedes usarla en su lugar si quieres controlar tus variables de Bootstrap.
Pero la pregunta es, ¿podemos empujar archivos CSS normales a través de nuestra función de procesamiento de SassaddStyle? Claro que sí. Vamos a añadir config.bowerDir y luego /bootstrap/dist/css/bootstrap.css:
Y ni siquiera tenemos que preocuparnos de obtener el archivo min, porque ya nos encargamos de eso. Este archivo pasará por el filtro sass ¡Pero no pasa nada! Simplemente parecerá el archivo Sass más aburrido de la historia.
Vuelve a ejecutar gulp:
gulpY ahora, main.css comienza con el glorioso código de Bootstrap. Y sería minificado si hubiera pasado la bandera --production.
Nuestro sitio debería seguir viéndose bien. Así que refresca. Sí, es como antes, pero con un archivo CSS menos molesto para descargar.
Renombrar la tarea a styles
Y antes de seguir, creo que podemos hacer otra mejora. Nuestra tarea se llama sass. Cambiémosla por styles, porque su trabajo es realmente procesar estilos, ya sean archivos CSS o Sass.
También tenemos que cambiar ese nombre en la tarea default. Ooops, y antes de iniciar Gulp, también cambiar el nombre en la tarea watch a styles:
Ok, ahora podemos probar cosas. ctrl+c para detener Gulp, y volver a iniciarlo:
gulp ¡Sí, no hay errores! ¡Y el sitio todavía se ve Tri-tástico! ¿Veis lo que he hecho?