Geweldig nieuws! We hebben al onze CSS geminificeerd en gecombineerd in slechts één bestand. Oh, behalve de Bootstrap CSS! We hebben twee goede opties. Ten eerste, we kunnen de link naar een publieke Bootstrap CDN sturen. Of we kunnen de bootstrapstyling in main.css proppen. Laten we dat doen – het is een stuk interessanter.
Bower!
Bootstrap is geïnstalleerd dankzij Bowser. Eh, ik bedoel bower. Bower is de composer voor frontend assets, zoals Bootstrap of jQuery. Het is een alternatief voor het downloaden van de bestanden en ze te committen naar je repo.
Bower leest van, verrassing!, een bower.json bestand:
En toen ik het project aanmaakte, voegde ik ook een .bowerrc bestand toe. Dit vertelde bower om dingen te downloaden in deze web/vendor directory:
Dat maakte ze publiek toegankelijk.
Maar nu we de spierkracht van Gulp hebben, wil ik het wat ingewikkelder maken. Verander dit in vendor/bower_components:
Dit zal deze bestanden buiten de publieke directory plaatsen, wat in het begin voor wat problemen zal zorgen. Verwijder dat oude spul:
rm -rf web/vendorGa naar de terminal en ctrl+c uit gulp. Draai nu bower install:
bower installAls je het bower commando niet hebt, kijk dan even in hun docs. Het wordt wereldwijd geïnstalleerd via npm, precies zoals gulp.
Done! Nu, in mijn vendor/ directory heb ik een prachtige bower_components folder.
Adding CSS Files to our Gulp Styles Stream
Maar zelfs als ik 2 aparte link tags in mijn layout zou willen hebben, kan ik dat niet:Bootstrap noemt de web/ directory niet langer home. Dus, weg met de link tag.
In gulpfile.js, laten we proberen om dingen te repareren! Ik zal beginnen met het toevoegen van een nieuwe configuratievariabele genaamd bowerDir, omdat het heel gebruikelijk zal zijn om naar dingen in die directory te verwijzen. Stel het in op vendor/bower_components:
Als je die directory opent, kun je zien waar het bootstrap.css bestand staat. Merk op, het is geen Sass bestand – gewoon normale oude CSS. Er is een Sass versie van Bootstrap, en die kun je gebruiken als je je Bootstrap variabelen wilt controleren.
Maar de vraag is, kunnen we gewone CSS bestanden door onze Sass-processingaddStyle functie duwen? Tuurlijk! Laten we config.bowerDir toevoegen en dan /bootstrap/dist/css/bootstrap.css:
En we hoeven ons niet eens zorgen te maken over het ophalen van het min-bestand, want daar zorgen we al voor. Dit bestand zal door de sass filter gaan. Maar dat is niet erg! Het zal er gewoon uitzien als het saaiste Sass bestand ooit.
Kop terug en draai gulp:
gulpEn nu, main.css begint met glorieuze Bootstrap code. En het zou worden geminificeerd als ik de --production vlag had doorgegeven.
Onze site zou er nog steeds geweldig uit moeten zien. Dus verversen. Yep, het is net als voorheen, maar met een minder vervelend CSS bestand om te downloaden.
Hernoem de taak naar styles
En voordat we verder gaan, denk ik dat we nog een verbetering kunnen maken. Onze taak heet sass. Laten we dit veranderen in styles, omdat het echt de taak is om stijlen te verwerken, of dat nu CSS of Sass bestanden zijn.
We moeten ook die naam veranderen op de default taak. Oeps, en voordat u Gulp start, moet u ook de naam van de watch taak veranderen in styles:
Ok, nu kunnen we dingen proberen. ctrl+c om Gulp te stoppen, en opnieuw te starten:
gulp Ja, geen fouten! En de site ziet er nog steeds Tri-tastisch uit! Zie je wat ik daar deed?