By Leave a Comment on Bower Components out of web

Hyviä uutisia! Olemme minifioineet ja yhdistäneet kaiken CSS:n yhteen tiedostoon. Ai, paitsi Bootstrap CSS:n! Meillä on kaksi hyvää vaihtoehtoa. Ensinnäkin, voisimme osoittaa linkin julkiseen Bootstrap CDN:ään. Tai voisimme ahtaa bootstrapstylingin suoraan main.css:een. Tehdään niin – se on paljon mielenkiintoisempaa.

Bower!

Bootstrap on asennettu Bowserin ansiosta. Öö, tarkoitan siis boweria. Boweron Composer frontend-varoille, kuten Bootstrapille tai jQuerylle.

… rivit 3 – 15

”dependencies”:

”dependencies”: {

”bootstrap”: Tämä käski boweria lataamaan asioita tähän web/vendor hakemistoon:

4 riviä .bowerrc

{

”hakemisto”: Muutetaan tämä muotoon vendor/bower_components:

4 riviä .bowerrc

{

”hakemisto”: Poista nuo vanhat tiedostot: 

rm -rf web/vendor

Mene terminaaliin ja ctrl+c ulos gulpista. Suorita nyt bower install:

bower install

Jos sinulla ei ole bower-komentoa, tutustu heidän dokumentteihinsa. Se asennetaanglobaalisti npm:n kautta, aivan kuten gulp.

Tehdään! Nyt minulla on vendor/-hakemistossani kaunis bower_componentskansio.

CSS-tiedostojen lisääminen Gulp Styles -virtaamme

Mutta vaikka haluaisin asettelussani kaksi erillistä linkkitunnistetta, en voi: Bootstrap ei enää kutsu web/-hakemistoa kodiksi. Hankkiudu siis eroon sen linkkitagista.

Kokeillaan gulpfile.js:ssä korjata asiat! Aloitan lisäämällä uuden konfiguraatiomuuttujan nimeltä bowerDir, koska tuossa hakemistossa oleviin asioihin viittaaminen tulee olemaan todella yleistä. Asetetaan se osoitteeseen vendor/bower_components:

41 riviä gulpfile.js

… rivit 1 – 3

var config = {

… rivit 5 – 8

bowerDir: ’vendor/bower_components’

};

… rivit 11 – 41

Jos avaat tuon hakemiston, huomaat, missä bootstrap.css-tiedosto sijaitsee. Huomaa, että se ei ole Sass-tiedosto – vain tavallinen vanha CSS. Bootstrapista on itse asiassa olemassa Sass-versio, ja voit täysin käyttää sitä sen sijaan, jos haluat hallita Bootstrap-muuttujia.

Mutta kysymys kuuluu, voimmeko työntää tavallisia CSS-tiedostoja Sass-processingaddStyle-funktiomme läpi? Toki! Lisätään config.bowerDir sitten /bootstrap/dist/css/bootstrap.css:

41 riviä gulpfile.js

… rivit 1 – 23

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

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

… rivit 30 – 33

});

… rivit 35 – 41

Eikä meidän tarvitse edes huolehtia siitä, että saamme min-tiedoston, koska huolehdimme jo siitä. Tämä tiedosto menee sass-suodattimen läpi. mutta se ei haittaa! Se näyttää vain kaikkein tylsimmältä Sass-tiedostolta ikinä.

Käy takaisin ja suorita gulp:

gulp

Ja nyt main.css alkaa loistavalla Bootstrap-koodilla. Ja se olisi minified, jos olisin välittänyt --production-lipun.

Sivustomme pitäisi silti näyttää hyvältä. Joten päivitä. Jep, se on aivan kuten ennenkin,mutta yhdellä vähemmän ärsyttävällä CSS-tiedostolla ladattavana.

Tehtävän uudelleennimeäminen tyyleiksi

Ja ennen kuin jatkamme, luulen, että voimme tehdä vielä yhden parannuksen. Tehtävämme nimi on sass. Muutetaan se styles:ksi, koska sen tehtävänä on oikeastaan käsitellä tyylejä, olivatpa ne sitten CSS- tai Sass-tiedostoja.

41 riviä gulpfile.js

… rivit 1 – 23

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

… rivit 25 – 33

});

… rivit 35 – 41

Meidän on myös muutettava tuota nimeä default-tehtävässä. Ooops, ja ennen Gulpin käynnistämistä vaihda myös tehtävän watch nimi styles:

41 riviä gulpfile.js

… rivit 1 – 35

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

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

});

… rivi 39

gulp.task(’default’, );

Okei, nyt voimme kokeilla asioita. ctrl+c pysäyttää Gulpin ja käynnistää sen uudelleen:

gulp

Kyllä, ei virheitä! Ja sivusto näyttää edelleen Tri-tastiselta! Näetkö mitä tein?

Vastaa

Sähköpostiosoitettasi ei julkaista.