Wspaniała wiadomość! Zminifikowaliśmy i połączyliśmy cały nasz CSS w jeden plik. Och, z wyjątkiem CSS Bootstrapa! Mamy dwie dobre opcje. Po pierwsze, możemy wskazać link do publicznego CDN Bootstrapa. Albo możemy upchnąć bootstrapstyling bezpośrednio w main.css. Zróbmy tak – jest to o wiele bardziej interesujące.
Bower!
Bootstrap jest zainstalowany dzięki Bowserowi. Um, mam na myśli bower. Bower to kompozytor dla zasobów frontendowych, takich jak Bootstrap czy jQuery. Jest to alternatywa dla pobierania plików i commitowania ich do twojego repo.
Bower czyta z, niespodzianka!, pliku bower.json:
A kiedy stworzyłem projekt, dodałem również plik .bowerrc. To mówiło bowerowi, aby pobierał rzeczy do tego web/vendor katalogu:
To uczyniło je publicznie dostępnymi.
Ale teraz, gdy mamy mięśnie Gulp, chcę skomplikować rzeczy. Changethis to be vendor/bower_components:
To umieści te pliki poza katalogiem publicznym, co na początku spowoduje pewne problemy. Usuń te stare rzeczy:
rm -rf web/vendorPrzejdź do terminala i ctrl+c z gulpa. Teraz, uruchom bower install:
bower installJeśli nie masz komendy bower, po prostu sprawdź ich docs. Jest on instalowany globalnie przez npm, dokładnie tak jak gulp.
Zrobione! Teraz, w moim katalogu vendor/ mam piękny bower_componentsfolder.
Adding CSS Files to our Gulp Styles Stream
Ale nawet gdybym chciał mieć 2 oddzielne tagi linków w moim layoucie, nie mogę:Bootstrap nie nazywa już katalogu web/ domem. Tak więc, pozbądź się tagu linku.
W gulpfile.js, spróbujmy to naprawić! Zacznę od dodania nowej zmiennej konfiguracyjnej o nazwie bowerDir, ponieważ naprawdę często będziemy się odwoływać do rzeczy w tym katalogu. Ustaw ją na vendor/bower_components:
Jeśli otworzysz ten katalog, możesz zobaczyć, gdzie znajduje się plik bootstrap.css. Zauważ, że nie jest to plik Sass – tylko zwykły, stary CSS. W Bootstrapie istnieje wersja Sass i możesz jej użyć, jeśli chcesz kontrolować zmienne Bootstrapa.
Pytanie jednak brzmi, czy możemy przepchnąć zwykłe pliki CSS przez naszą funkcję Sass-processingaddStyle? Jasne! Dodajmy config.bowerDir następnie /bootstrap/dist/css/bootstrap.css:
I nawet nie musimy się martwić o uzyskanie pliku min, ponieważ już się tym zajęliśmy. Ten plik przejdzie przez filtr sass. Ale to nie szkodzi! Będzie po prostu wyglądał jak najnudniejszy plik Sass w historii.
Powróć i uruchom gulp:
gulpA teraz, main.css zaczyna się od chwalebnego kodu Bootstrapa. I zostałby on zminifikowany, gdybym przekazał flagę --production.
Nasza strona powinna nadal wyglądać świetnie. Więc odśwież. Tak, jest tak jak poprzednio, ale z jednym mniej kłopotliwym plikiem CSS do pobrania.
Zmiana nazwy zadania na style
A zanim przejdziemy dalej, myślę, że możemy dokonać kolejnego ulepszenia. Nasze zadanie nazywa się sass. Zmieńmy ją na styles, ponieważ jego zadaniem jest tak naprawdę przetwarzanie stylów, niezależnie od tego, czy są to pliki CSS czy Sass.
Musimy też zmienić tę nazwę w zadaniu default. Ooops, i beforerestarting Gulp, również zmień nazwę na watch zadanie na styles:
Ok, teraz możemy spróbować różnych rzeczy. ctrl+c aby zatrzymać Gulpa, i uruchomić go ponownie:
gulp Tak, żadnych błędów! A strona nadal wygląda fantastycznie! Widzisz, co zrobiłem?