2014-07-17 4 views
7

ich eine gulpfile für das Einrichten einer Arbeitsumgebung Front-End-Entwicklung.Wie Schluck verwenden, um eine HTML-Datei auf die Links für die installierte Bower zu injizieren Pakete

Hier ist, wie es funktioniert:

Das Skript packt Bower in bower.json und Ausgänge in die/Öffentliche Ordner die wichtigsten Dateien jedes installierte Paket, js und CSS in ihren jeweiligen Produktions Ordner definierten Pakete (/ öffentlich/js) (/ öffentlich/css).

Das Skript startet auch eine Überwachungsaufgabe für alle Dateien, CSS-, JS- und HTML-Dateien. Wenn ich diese Dateien im Entwicklungsordner (/ src) speichere, werden ihre/öffentlichen Gegenstücke in Echtzeit aktualisiert.

Auf diese Weise installiere ich einfach Pakete lokal mit Bower und indem ich diese gulpfile ausführe, werde ich die Produktionsdateien in meinem/public Ordner haben, aber ich muss sie verlinken!

Wie gesagt, der fehlende Teil, den ich möchte, dass das Skript Links zu diesen Dateien im Kopf meiner index.html, basierend auf welchen Paketen ich beschloss, von Bower zu installieren.

Also zum Beispiel, wenn ich Bootstrap heruntergeladen habe, möchte ich das Skript automatisch in den Kopf meiner HTML-Seite den Link zu Bootstrap CSS und JS-Dateien direkt vor dem Body-Closing-Tag (im Idealfall) injizieren.

Hier ist mein Skript auf github, haben einen Blick auf der README und bei dem gulpfile:

Ich weiß nicht, was Ansatz und/oder wenn ein Zug gibt es das erreichen Plugin verwenden, kann, wenn jemand Punkt Ich in die richtige Richtung würde ich sehr schätzen. Vielen Dank.

Antwort

5

Dafür ich derzeit gulp-inject verwenden, wirkt wie ein Zauber!

+0

Genau mit, was ich suchte, dank Kumpel. – pwnjack

3

Wie wäre es nur

gulp wiredep 

Beispiel für die Verwendung:

hinzufügen Holder.js Paket bestehende Yeoman/Bower/Gulp Projekt.

bower install holderjs --save 

Dies wurde dem Abhängigkeitsfeld hinzugefügt. Nachdem Sie erhalten müssen hinzugefügt, um es zu Ihrem html von

gulp wiredep 
Verwandte Themen