By Leave a Comment on Bower Components out of web

Skvělá zpráva! Minifikovali jsme a spojili všechny naše CSS do jediného souboru. Tedy kromě CSS Bootstrapu! Máme dvě dobré možnosti. Zaprvé bychom mohli odkázat na veřejnou CDN Bootstrapu. Nebo bychom mohli Bootstrapstyling nacpat přímo do main.css. Udělejme to – je to mnohem zajímavější.

Bower!

Bootstrap je nainstalován díky Bowserovi. Hm, chci říct Bower. Bowerje kompozitor pro frontendové prostředky, jako je Bootstrap nebo jQuery. Je to alternativa ke stahování souborů a jejich odevzdávání do repozitáře.

Bower čte, překvapivě!, ze souboru bower.json:

20 řádků bower.json

{

„name“: „

… řádky 3 – 15

„dependencies“: {

„bootstrap“: „~3.3.2“

}

}

A když jsem vytvářel projekt, přidal jsem také soubor .bowerrc. Ten nařídil bowerrc stahovat věci do tohoto adresáře web/vendor:

4 řádky .bowerrc

{

„adresář“: „web/vendor“

}

Tím se staly veřejně přístupnými.

Ale teď, když máme svaly Gulpu, chci to zkomplikovat. Změňte to na vendor/bower_components:

4 řádky .bowerrc

{

„adresář“: „vendor/bower_components“

}

To umístí tyto soubory mimo veřejný adresář, což zpočátku,způsobí určité problémy. Odstraňte ty staré věci:

rm -rf web/vendor

Přejděte do terminálu a ctrl+c z gulp. Nyní spusťte bower install:

bower install

Pokud nemáte příkaz bower, stačí se podívat do jejich dokumentace. Instaluje se globálně přes npm, přesně jako gulp.

Dokončeno! Nyní mám ve svém adresáři vendor/ krásnou složku bower_components.

Přidání souborů CSS do našeho proudu stylů Gulp

Ale i kdybych chtěl mít v rozvržení 2 samostatné značky odkazů, nemůžu:Bootstrap už adresář web/ nenazývá domovským. Takže se zbavte jeho značkylink.

V gulpfile.js se pokusíme věci napravit! Začnu tím, že přidám novou konfiguračníproměnnou s názvem bowerDir, protože se bude opravdu často odkazovat na věci v tomto adresáři. Nastavte ji na vendor/bower_components:

41 řádků gulpfile.js

… řádky 1 – 3

var config = {

… řádky 5 – 8

bowerDir: ‚vendor/bower_components‘

};

… řádky 11 – 41

Pokud otevřete tento adresář, můžete vidět, kde se nachází soubor bootstrap.css. Všimněte si, že to není soubor Sass – jen obyčejné staré CSS. Ve skutečnostiexistuje verze Sass pro Bootstrap, a pokud chcete ovládat proměnné Bootstrapu, můžete ji zcela jistě použít místo něj.

Ale otázka zní: Můžeme přes naši funkci Sass-processingaddStyle protlačit obyčejné soubory CSS? Jistě! Přidáme config.bowerDir pak /bootstrap/dist/css/bootstrap.css:

41 řádků gulpfile.js

… řádky 1 – 23

gulp.task(‚sass‘, function() {

app.addStyle(, ‚main.css‘);

… řádky 30 – 33

});

… řádky 35 – 41

A nemusíme se ani starat o získání souboru min, protože o to se již postaráme. Tento soubor projde filtrem sass. ale to nevadí! Bude to prostě vypadat jako ten nejnudnější soubor Sass na světě.

Vraťte se zpět a spusťte gulp:

gulp

A nyní main.css začíná slavným kódem Bootstrap. A byl byminifikovaný, kdybych předal příznak --production.

Naše stránky by měly stále vypadat skvěle. Takže obnovit. Jo, je to jako předtím,ale s jedním otravným souborem CSS ke stažení méně.

Přejmenování úlohy na styly

A než budeme pokračovat, myslím, že můžeme provést další vylepšení. Naše úloha se jmenuje sass. Změníme ji na styles, protože jejím úkolem je skutečnězpracovávat styly, ať už se jedná o soubory CSS nebo Sass.

41 řádků gulpfile.js

… řádky 1 – 23

gulp.task(‚styles‘, function() {

… řádky 25 – 33

});

… řádky 35 – 41

Tento název musíme změnit také u úlohy default. Ooops, a předspustit Gulp, také změnit název na watch úloha na styles:

41 řádků gulpfile.js

… řádky 1 – 35

gulp.task(‚watch‘, function() {

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

});

… řádek 39

gulp.task(‚default‘, );

Ok, nyní můžeme věci vyzkoušet. ctrl+c pro zastavení Gulpu a jeho opětovné spuštění:

gulp

Ano, žádné chyby! A web stále vypadá tristně! Vidíte, co jsem udělal?

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.