By Leave a Comment on Bower Components out of web

Vești bune! Am minificat și am combinat toate CSS-urile noastre într-un singur fișier. Oh, cu excepția CSS-ului Bootstrap! Avem două opțiuni bune. În primul rând, am putea îndrepta link-ul către un CDN public pentru Bootstrap. Sau am putea înghesui bootstrapstyling-ul chiar în main.css. Haideți să facem asta – este mult mai interesant.

Bower!

Bootstrap este instalat datorită lui Bowser. Um, vreau să spun bower. Bowereste compozitorul pentru activele frontend, cum ar fi Bootstrap sau jQuery. Este o alternativă la descărcarea fișierelor și trimiterea lor în repo.

Bower citește din, surpriză!, un fișier bower.json:

20 de linii bower.json

{

„name”: „knpu-gulp”,

… liniile 3 – 15

„dependencies”: {

„bootstrap”: „~3.3.2”

}

}

Și când am creat proiectul, am adăugat și un fișier .bowerrc. Acesta i-a spus luibower să descarce lucruri în acest web/vendor director web/vendor:

4 linii .bowerrc

{

„director”: „web/vendor”

}

Aceasta le-a făcut accesibile publicului.

Dar acum că avem mușchiul lui Gulp, vreau să complicăm lucrurile. Schimbațiacest lucru să fie vendor/bower_components:

4 linii .bowerrc

{

„director”: „vendor/bower_components”

}

Aceasta va pune aceste fișiere în afara directorului public, ceea ce la început,va cauza unele probleme. Ștergeți chestiile vechi:

rm -rf web/vendor

Direcționați-vă spre terminal și ctrl+c din gulp. Acum, rulați bower install:

bower install

Dacă nu aveți comanda bower, consultați doar documentația lor. Este instalatglobal prin npm, exact ca și gulp.

Făcut! Acum, în directorul meu vendor/ am un frumos bower_componentsfolder.

Adding CSS Files to our Gulp Styles Stream

Dar chiar dacă aș vrea să am 2 etichete de link separate în layout-ul meu, nu pot:Bootstrap nu mai numește acasă directorul web/. Deci, scăpați de tag-ul săulink.

În gulpfile.js, să încercăm să reparăm lucrurile! Voi începe prin a adăuga o nouă variabilă de configurare numită bowerDir, pentru că va fi foarte frecvent să ne referim la lucruri din acel director. Setați-l la vendor/bower_components:

41 linii gulpfile.js

… liniile 1 – 3

var config = {

… liniile 5 – 8

bowerDir: ‘vendor/bower_components’

};

… liniile 11 – 41

Dacă deschideți acel director, puteți vedea unde trăiește fișierul bootstrap.css. Observați că nu este un fișier Sass – doar vechiul CSS obișnuit. Există de fapt o versiune Sass a Bootstrap, și puteți folosi în totalitate acest lucru în loc dacă doriți să controlați variabilele Bootstrap.

Dar întrebarea este dacă putem împinge fișiere CSS simple prin funcția noastră de procesare SassaddStyle? Sigur că da! Să adăugăm config.bowerDir apoi /bootstrap/dist/css/bootstrap.css:

41 linii gulpfile.js

… liniile 1 – 23

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

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

… liniile 30 – 33

});

… liniile 35 – 41

Și nici măcar nu trebuie să ne facem griji cu privire la obținerea fișierului min, pentru că deja ne ocupăm de asta. Acest fișier va trece prin filtrul sass.Dar asta este în regulă! Va arăta doar ca cel mai plictisitor fișier Sass din toate timpurile.

Întoarceți-vă și rulați gulp:

gulp

Și acum, main.css începe cu un cod Bootstrap glorios. Și ar fi fost minificat dacă aș fi trecut steagul --production.

Site-ul nostru ar trebui să arate în continuare grozav. Așa că reîmprospătați. Da, este exact ca înainte,dar cu un fișier CSS mai puțin enervant de descărcat.

Renumirea Task to styles

Și înainte de a continua, cred că putem face o altă îmbunătățire. Sarcina noastră se numește sass. Să o schimbăm în styles, pentru că sarcina sa este de faptde a procesa stiluri, fie că acestea sunt fișiere CSS sau Sass.

41 linii gulpfile.js

… liniile 1 – 23

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

… liniile 25 – 33

}}; … liniile 35 – 41

De asemenea, trebuie să schimbăm acest nume în sarcina default. Ooops, și înainte de a reporni Gulp, schimbați și numele pe task-ul watch în styles:

41 linii gulpfile.js

… liniile 1 – 35

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

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

});

… linia 39

gulp.task(‘default’, );

Ok, acum putem încerca lucruri. ctrl+c pentru a opri Gulp, și a-l reporni:

gulp

Da, fără erori! Și site-ul arată în continuare Tri-tastic! Vedeți ce am făcut acolo?

.

Lasă un răspuns

Adresa ta de email nu va fi publicată.