2014-07-17 13 views
7

Zrobiłem gulpfile, aby skonfigurować front-endowe środowisko pracy.Jak używać gulp do wstrzykiwania do pliku html linków do zainstalowanych pakietów Bower

Oto jak to działa:

Skrypt chwyta Bower pakiety określono w bower.json i wyjść do/w folderze publicznym główne akta każdego zainstalowanego pakietu, JS i CSS w swoich folderach produkcyjnych (/ public/js) (/ public/css).

Skrypty uruchamiają także zadanie oglądania dla wszystkich plików, css, js i html, a gdy tylko zapiszę te pliki w folderze deweloperskim (/ src) ich/publiczne odpowiedniki będą aktualizowane w czasie rzeczywistym.

W ten sposób po prostu instaluję pakiety lokalnie z Bower i uruchamiając ten plik gulp, będę miał gotowe pliki produkcyjne w folderze/public, ale muszę je połączyć!

Tak jak powiedziałem, brakująca część, którą chcę, aby skrypt zapisywał linki do tych plików w nagłówku mojego pliku index.html, w oparciu o pakiety, które zdecydowałem się zainstalować z Bower.

Na przykład, jeśli pobrałem Bootstrap, chcę, aby skrypt automatycznie wstawił do nagłówka mojej strony html link do Bootstrap css i plików js tuż przed tagiem zamykającym treść (idealnie).

Oto mój skrypt na github, rzucić okiem na README i na gulpfile:

nie wiem jakie podejście i/lub czy jest jakiś łyk wtyczki użyć, aby to osiągnąć, jeśli ktoś może wskazać mi w dobrym kierunku, doceniłbym bardzo. Dzięki.

Odpowiedz

5

Do tego obecnie używam gulp-inject, działa jak czar!

+0

Dokładnie tego, czego szukałem, dzięki kolego. – pwnjack

3

Jak około tuż za pomocą

gulp wiredep 

Przykład:

Dodaj pakiet Holder.js do istniejącego projektu Yeoman/Bower/haustem.

bower install holderjs --save 

Dodaje to do tablicy zależności. Po tym, jak musisz go dodać do swojego html, używając

gulp wiredep