Bower Components out of web > Gulp! Frissítés a frontend eszközeidnek | SymfonyCasts

Nagyszerű hír! Minifikáltuk és egyesítettük az összes CSS-ünket egyetlen fájlba. Ó, kivéve a Bootstrap CSS-t! Két jó lehetőségünk van. Először is, rámutathatunk a linkre egy nyilvános Bootstrap CDN-re. Vagy belegyömöszölhetjük a bootstrapstylinget egyenesen a main.css-ba. Tegyük ezt – ez sokkal érdekesebb.

Bower!

A Bootstrap telepítve van a Bowsernek köszönhetően. Ööö, mármint a bower-nek. A Bowera frontend eszközök, mint a Bootstrap vagy a jQuery kompozitora. Ez egy alternatíva a fájlok letöltésére és a repóba való commitolásra.

Bower olvassa, meglepetés!, egy bower.json fájlból:

20 sor bower.json

{

“name”:

… sorok 3 – 15

“dependencies”: “knpu-gulp”,

“dependencies”: {

“bootstrap”: “

}

És amikor létrehoztam a projektet, hozzáadtam egy .bowerrc fájlt is. Ez utasította a bower-t, hogy ebbe a web/vendor könyvtárba töltse le a dolgokat:

4 sor .bowerrc

{

“könyvtár”: “web/vendor”

}

Ezzel nyilvánosan elérhetővé váltak.

De most, hogy megvan a Gulp izomereje, szeretném bonyolítani a dolgokat. Változtassuk meg ezt vendor/bower_components:

4 soros .bowerrc

{

“directory”: “

}

Ez a nyilvános könyvtáron kívülre helyezi ezeket a fájlokat, ami elsőre,néhány problémát fog okozni. Töröld ki a régi dolgokat:

rm -rf web/vendor

Lépj a terminálhoz és ctrl+c-vel lépj ki a gulp-ból. Most futtasd a bower install:

bower install

Ha nincs meg a bower parancs, akkor nézd meg a dokumentációjukat. Az npm-en keresztül globálisan települ, pontosan úgy, mint a gulp.

Kész! Most már a vendor/ könyvtáramban van egy gyönyörű bower_componentsmappám.

CSS fájlok hozzáadása a Gulp Styles Streamünkhöz

De még ha 2 különálló linkcímkét is akarnék az elrendezésemben, akkor sem tudok:A Bootstrap már nem hívja a web/ könyvtárat home-nak. Szóval, szabaduljunk meg a link tagtől.

A gulpfile.js-ben próbáljuk meg kijavítani a dolgokat! Azzal kezdem, hogy hozzáadok egy új konfigurációs változót bowerDir néven, mert nagyon gyakori lesz, hogy ebben a könyvtárban lévő dolgokra hivatkozunk. Állítsuk be a vendor/bower_components:

41 sor gulpfile.js

… 1 – 3. sor

var config = {

… 5 – 8. sor

bowerDir: ‘vendor/bower_components’

};

… 11 – 41. sor

Ha megnyitod ezt a könyvtárat, láthatod, hol található a bootstrap.css fájl. Figyeld meg, hogy ez nem egy Sass fájl – csak egy hagyományos régi CSS. Valójában van egy Sass verziója a Bootstrapnek, és teljesen használhatod ezt helyette, ha a Bootstrap változókat akarod irányítani.

De a kérdés az, hogy tudunk-e sima CSS fájlokat tolni a Sass-feldolgozóaddStyle függvényünkön keresztül? Persze! Adjunk hozzá config.bowerDir majd /bootstrap/dist/css/bootstrap.css:

41 sor gulpfile.js

… 1 – 23. sor

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

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

… 30 – 33. sor

});

… 35 – 41. sor

És még a min fájl megszerzésével sem kell foglalkoznunk, mert arról már gondoskodtunk. Ez a fájl átmegy a sass szűrőn. de ez nem baj! Csak úgy fog kinézni, mint a valaha volt legunalmasabb Sass fájl.

Megyünk vissza és futtatjuk a gulp:

gulp

És most a main.css dicsőséges Bootstrap kóddal indul. És ez lenne minifikált, ha átadtam volna a --production flaget.

A honlapunknak még mindig remekül kell kinéznie. Tehát frissítsd fel. Igen, ugyanolyan, mint korábban,csak egy bosszantó CSS-fájllal kevesebbet kell letölteni.

A Task átnevezése styles

És mielőtt folytatnánk, azt hiszem, még egy javulást eszközölhetünk. A feladatunk neve sass. Ezt változtassuk meg styles-re, mert a feladata valójában az, hogy feldolgozza a stílusokat, legyenek azok CSS vagy Sass fájlok.

41 sor gulpfile.js

… sorok 1 – 23

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

… 25 – 33. sor

});

… 35 – 41. sor

Az default feladaton is meg kell változtatnunk ezt a nevet. Hoppá, és a Gulp újraindítása előtt a watch feladaton is változtassuk meg a nevet styles:

41 sor gulpfile.js

… sorok 1 – 35

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

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

});

… 39. sor

gulp.task(‘default’, );

Oké, most már kipróbálhatunk dolgokat. ctrl+c a Gulp leállításához, majd újraindításához:

gulp

Igen, nincs hiba! És az oldal még mindig Tri-tastikusan néz ki! Látod, mit csináltam?

Free Press