By Leave a Comment on Bower Components out of web

Goda nyheter! Vi har minifierat och kombinerat all vår CSS till en enda fil. Åh, förutom Bootstrap CSS! Vi har två bra alternativ. För det första kan vi peka på länken till en offentlig Bootstrap CDN. Eller så kan vi klämma in bootstrapstyling direkt i main.css. Låt oss göra det – det är mycket intressantare.

Bower!

Bootstrap är installerat tack vare Bowser. Um, jag menar bower. Bowerär kompositören för frontend-tillgångar, som Bootstrap eller jQuery. Det är ett alternativ till att ladda ner filerna och lägga in dem i din repo.

Bower läser från, överraskande nog, en bower.json fil:

20 rader bower.json

{

”name”: ”knpu-gulp”,

… rad 3 – 15

”dependencies”: {

”bootstrap”: ”~3.3.2”

}

}

Och när jag skapade projektet lade jag också till en .bowerrc-fil. Denna berättade för bower att hämta saker till den här web/vendor katalogen:

4 rader .bowerrc

{

”katalog”: ”

}

Det gjorde dem allmänt tillgängliga.

Men nu när vi har musklerna i Gulp vill jag komplicera saker och ting. Ändrade detta till att bli vendor/bower_components:

4 rader .bowerrc

{

”directory”: ”

}

Detta kommer att placera dessa filer utanför den offentliga katalogen, vilket till en början kommer att orsaka vissa problem. Ta bort de gamla sakerna:

rm -rf web/vendor

Hoppa till terminalen och ctrl+c ut ur gulp. Kör nu bower install:

bower install

Om du inte har kommandot bower är det bara att kolla in deras dokumentation. Det installeras globalt via npm, precis som gulp.

Det är gjort! Nu har jag en vacker bower_componentsmapp i min vendor/-katalog.

Att lägga till CSS-filer till vårt Gulp Styles Stream

Men även om jag skulle vilja ha två separata länktaggar i min layout kan jag inte göra det: Bootstrap kallar inte längre web/-katalogen för hem. Så gör dig av med itslink-taggen.

I gulpfile.js ska vi försöka fixa saker och ting! Jag börjar med att lägga till en ny konfigurationsvariabel som heter bowerDir, eftersom det kommer att bli väldigt vanligt att hänvisa till saker i den katalogen. Ställ in den på vendor/bower_components:

41 rader gulpfile.js

… rader 1 – 3

var config = {

… rad 5 – 8

bowerDir: ’vendor/bower_components’

};

… rad 11 – 41

Om du öppnar den katalogen kan du se var filen bootstrap.css bor. Observera att det inte är en Sass-fil – bara vanlig gammal CSS. Det finns faktiskt en Sass-version av Bootstrap, och du kan helt enkelt använda den i stället om du vill kontrollera dina Bootstrap-variabler.

Men frågan är om vi kan skicka vanliga CSS-filer genom vår Sass-processingaddStyle-funktion? Javisst! Låt oss lägga till config.bowerDir och sedan /bootstrap/dist/css/bootstrap.css:

41 rader gulpfile.js

… rader 1 – 23

gulp.task(’sass’, function() {

app.addStyle(, ’main.css’);

… rader 30 – 33

});

… rader 35 – 41

Och vi behöver inte ens oroa oss för att hämta min-filen, för det tar vi redan hand om. Den här filen kommer att gå genom sass-filtret, men det är okej! Den kommer bara att se ut som den tråkigaste Sass-filen någonsin.

Kör tillbaka och kör gulp:

gulp

Och nu börjar main.css med härlig Bootstrap-kod. Och den skulle vara minifierad om jag hade använt flaggan --production.

Vår webbplats borde fortfarande se bra ut. Så uppdatera. Japp, det är precis som förut, men med en mindre irriterande CSS-fil att ladda ner.

Omdöpa uppgiften till styles

Och innan vi fortsätter tror jag att vi kan göra ytterligare en förbättring. Vår uppgift heter sass. Låt oss ändra detta till styles, eftersom dess uppgift egentligen är att bearbeta stilar, oavsett om det är CSS- eller Sass-filer.

41 rader gulpfile.js

… rader 1 – 23

gulp.task(’styles’, function() {

… rader 25 – 33

});

… rader 35 – 41

Vi måste också ändra det namnet på default-uppgiften. Ooops, och innan du startar Gulp måste du också ändra namnet på uppgiften watch till styles:

41 rader gulpfile.js

… rad 1 – 35

gulp.task(’watch’, function() {

gulp.watch(config.assetsDir+’/’+config.sassPattern, )

});

… rad 39

gulp.task(’default’, );

Okej, nu kan vi prova saker och ting. ctrl+c för att stoppa Gulp, och starta det igen:

gulp

Ja, inga fel! Och webbplatsen ser fortfarande Tri-tastisk ut! Ser du vad jag gjorde där?

Lämna ett svar

Din e-postadress kommer inte publiceras.