Gute Neuigkeiten! Wir haben unser gesamtes CSS minimiert und in einer einzigen Datei zusammengefasst. Oh, außer dem Bootstrap-CSS! Wir haben zwei gute Möglichkeiten. Erstens könnten wir den Link auf ein öffentliches Bootstrap CDN verweisen. Oder wir könnten das Bootstrap-Styling direkt in main.css packen. Machen wir das – es ist viel interessanter.
Bower!
Bootstrap ist dank Bowser installiert. Ähm, ich meine Bower. Bower ist der Composer für Frontend-Assets, wie Bootstrap oder jQuery. Es ist eine Alternative zum Herunterladen der Dateien und dem Einbinden in das eigene Repo.
Bower liest aus, Überraschung!, einer bower.json Datei:
Und als ich das Projekt erstellt habe, habe ich auch eine .bowerrc Datei hinzugefügt. Diese weist Bower an, Dinge in dieses web/vendor Verzeichnis herunterzuladen:
Damit waren sie öffentlich zugänglich.
Aber jetzt, wo wir die Muskeln von Gulp haben, möchte ich die Dinge verkomplizieren. Ändere dies zu vendor/bower_components:
Damit werden diese Dateien außerhalb des öffentlichen Verzeichnisses liegen, was anfangs einige Probleme verursachen wird. Löschen Sie das alte Zeug:
rm -rf web/vendorGehen Sie zum Terminal und verlassen Sie Gulp mit Strg+C. Führen Sie nun bower install:
bower installWenn Sie den bower-Befehl nicht haben, sehen Sie sich einfach die Dokumentation an. Es wird global über npm installiert, genau wie gulp.
Erledigt! Jetzt habe ich in meinem vendor/-Verzeichnis einen schönen bower_components-Ordner.
Adding CSS Files to our Gulp Styles Stream
Aber selbst wenn ich 2 separate Link-Tags in meinem Layout haben wollte, kann ich das nicht: Bootstrap nennt das web/-Verzeichnis nicht mehr home. Also, weg mit dem Link-Tag.
In gulpfile.js, lassen Sie uns versuchen, die Dinge zu beheben! Ich beginne damit, eine neue Konfigurationsvariable namens bowerDir hinzuzufügen, weil es sehr üblich sein wird, auf Dinge in diesem Verzeichnis zu verweisen. Setze sie auf vendor/bower_components:
Wenn du dieses Verzeichnis öffnest, kannst du sehen, wo die bootstrap.css Datei liegt. Beachten Sie, dass es sich nicht um eine Sass-Datei handelt, sondern um normales altes CSS. Es gibt tatsächlich eine Sass-Version von Bootstrap, und Sie können diese stattdessen verwenden, wenn Sie Ihre Bootstrap-Variablen kontrollieren wollen.
Aber die Frage ist, können wir einfache CSS-Dateien durch unsere Sass-VerarbeitungsfunktionaddStyle schieben? Klar! Fügen wir config.bowerDir und dann /bootstrap/dist/css/bootstrap.css hinzu:
Und wir müssen uns nicht einmal darum kümmern, die min-Datei zu bekommen, denn darum kümmern wir uns bereits. Diese Datei wird durch den sass-Filter laufen, aber das ist in Ordnung! Sie wird einfach wie die langweiligste Sass-Datei aller Zeiten aussehen.
Kehre zurück und führe gulp:
gulpUnd jetzt beginnt main.css mit glorreichem Bootstrap-Code. Und er würde minimiert werden, wenn ich das --production-Flag übergeben hätte.
Unsere Seite sollte immer noch großartig aussehen. Also aktualisieren. Ja, es ist genau wie vorher, nur mit einer lästigen CSS-Datei weniger, die heruntergeladen werden muss.
Umbenennung der Aufgabe in styles
Und bevor wir weitermachen, denke ich, dass wir eine weitere Verbesserung vornehmen können. Unsere Aufgabe heißt sass. Ändern wir ihn in styles, denn seine Aufgabe ist es wirklich, Stile zu verarbeiten, egal ob es sich um CSS- oder Sass-Dateien handelt.
Wir müssen auch den Namen in der default Aufgabe ändern. Ooops, und bevor Sie Gulp starten, ändern Sie auch den Namen der Aufgabe watch in styles:
Ok, jetzt können wir Dinge ausprobieren. ctrl+c, um Gulp zu stoppen, und es neu zu starten:
gulp Ja, keine Fehler! Und die Seite sieht immer noch tri-tastisch aus! Sehen Sie, was ich da gemacht habe?