2014-05-16 7 views
17

Grails 2.4 jest teraz za pomocą Aktywów Pipeline do zarządzania i przetwarzania zasobów statycznych w aplikacji Grails zamiast systemu zasobów. To jest całkiem nowe i jeszcze nie ma o tym zbyt wiele w Internecie.System Grails Asset-Pipeline z 3rd bibliotekami partyjnych

Moje pytanie brzmi: jak prawidłowo obsługiwać biblioteki innych firm? Na przykład biblioteka zawiera wszystkie pliki .css.

Czy należy skopiować różne typy plików do odpowiadających im podfolderów assets/javascripts/, assets/stylesheets/? Co zrobić z plikami, które tak naprawdę nie mają oczywistej lokalizacji, takich jak pliki .json, tekst lub doc?

Czy mogę utworzyć folder vendors/select2/? Gdzie, w assets/ lub w web-app/? A następnie, w jaki sposób należy załadować wszystkie niezbędne pliki z moich GSP?

Ta biblioteka będzie również potrzebna tylko w widoku formularza, a zatem nie powinna być ładowana, chyba że jest potrzebna.

Odpowiedz

19

odpowiedź Baxxabit doprowadziły mnie do rozwiązania. Walczyłem z tym samym, ale chciałem jak najlepiej wykorzystać potok, aby móc korzystać z wtyczki potoku less-asset.

Przykładowo, za pomocą funkcji bootstrap utworzyłem folder dostawcy jako równorzędny ze standardowymi folderami zasobów, a następnie upuszczono tam pliki ładowania początkowego.

application.js:

//This is a javascript file with its top level require directives 
//= require jquery 
//= require bootstrap-3.1.1/javascript/bootstrap 
//= require_tree views 
//= require_self 
... 

i application.css:

/* 
*= require_self 
*= require main 
*= require mobile 
*= require bootstrap-3.1.1/stylesheets/bootstrap 
*= encoding UTF-8 
*/ 

Aby zastąpić dostosowanie boostrap mogę po prostu upuścić plik variables.less dostosowany do ./grails-app/assets /vendor/bootstrap-3.1.1/stylesheets/variables.less. Pierwszy folder w zasobach jest ignorowany, jeśli chodzi o przesłanianie plików, po czym ścieżka musi pasować do tego, co podasz dostawcy.

To daje mi ten rodzaj hierarchii:

grails-app/assets/ 
├── images 
... 
├── javascripts 
│   └── application.js 
├── stylesheets 
│   ├── application.css 
│   ├── bootstrap-3.1.1 
│   │   └── stylesheets 
│   │    └── variables.less 
│   ├── errors.css 
│   ├── main.css 
│   └── mobile.css 
└── vendor 
    └── bootstrap-3.1.1 
     ├── javascript 
     │   ├── bootstrap.js 
     │   └── bootstrap.min.js 
     └── stylesheets 
      ├── alerts.less 
... 
      ├── variables.less 
      └── wells.less 

Lubię wynik. Paczka rozproszona jest czysto nakreślona i względnie łatwa do uaktualnienia, a moje zmiany w tym pakiecie zostały rozdzielone na wyraźnie identyfikowalny plik dostosowywania.

Podałem przykład przy użyciu wtyczki potoku sass-asset-pipeline pod adresem https://github.com/ggascoigne/grails-pipeline-scss.

+0

można nawet użyć tej struktury z altana, prawda? – genuinefafa

+0

Doskonała porada, która powinna być częścią oficjalnego dokumentu. Użycie manifestu dla każdej biblioteki może pomóc w skalowaniu, jeśli masz więcej niż dwie biblioteki. "altana" ma ładne miejsce na tym zdjęciu, chociaż nadal trzeba kopiować rzeczy z bower_components do zasobów. – youri

+0

Używam Bowera dla moich zasobów front-end, a twój projekt Github pomógł mi niezmiernie. – dspies

2

Możesz utworzyć inny folder, taki jak jsplugins w pobliżu standardowych folderów (javascripts, style, images), a następnie możesz dołączyć bibliotekę js do niezbędnych stron, jeśli nie chcesz korzystać z tej biblioteki na wszystkich stronach.

Zrób coś takiego:

<assets:javascript src="select2/pathToYourJSFile"/> 

UWAGA: można pominąć ścieżkę pierwszego poziomu mocy assets ścieżki, w tym przykładzie jest to jsplugins.

Najlepszym sposobem jest użycie pliku manifest.js , w którym można dołączyć niezbędne pliki za pośrednictwem dyrektywy require.

Powinieneś użyć folderu assests zamiast aplikacji internetowej. Podczas budowania pliku wojennego wszystkie pliki z zasobów zostaną skopiowane do folderu aplikacji internetowej.

Przydatne wideo z Bobbym Warner: http://www.youtube.com/watch?v=VHDBlGtAHB4

Dokumentacja: http://bertramdev.github.io/asset-pipeline/

2

Asset-pipeline wydaje mi się krokiem wstecz. Najwyraźniej nie mogę już używać cdnjs lub podobnych CDN do uzyskiwania dostępu do zewnętrznych bibliotek. Czy naprawdę oddaję to wszystko, aby zminimalizować JS dla własnego kodu JS?

+0

Myślę, że "Zasób zasobów z zewnętrznego katalogu pamięci" w dokumentacji potoku rurociągu (http://bertramdev.github.io/asset-pipeline/guide /index.html) może pomóc w korzystaniu z CDN. – jkwuc89

+5

Nie, nie chcę kopiować danych do cdnjs, chcę tylko używać zasobów obsługiwanych przez cdnjs w mojej aplikacji. – ben3000

0

To działa dobrze w przypadku zasobów w folderze aktywów, ale biorąc pod uwagę rozprzestrzenianie się komponentów sieciowych i ram javascript, często sprawdzamy zewnętrzne projekty poza projektem Grails, które chcemy spakować i rozpowszechniać za pomocą naszej aplikacji . Masz również przypadki, w których front-end aplikacji jest obsługiwany przez deweloperów front-end, którzy nie są programistami grails, i używają różnych narzędzi do rozwijania i testowania front endu w sposób, który jest odłączony od usług REST grails.

A więc, zamiast kopiować zasoby zewnętrznego projektu do swojej aplikacji Grails, w jaki sposób utworzyć odniesienie do zewnętrznych folderów, które zagwarantują, że te zasoby zostaną dołączone do aplikacji za każdym razem, gdy uruchomisz aplikację w trakcie programowania, oraz kiedy WAR aplikacji do wdrożenia?

-1

Do obsługi bibliotek 3rd party, można dodać flipcountdown folderu wewnątrz folderu aktywów,

 
    ├── assets 
    │ ├── flipcountdown 
    │ │ ├── admin 
    │ │ └── global 
    │ ├── images 
    │ │ ├── apple-touch-icon.png 
    │ │ ├── apple-touch-icon-retina.png 
    │ │ ├── favicon.ico 
    │ │ ├── grails_logo.png 
    │ │ ├── skin 
    │ │ ├── spinner.gif 
    │ │ └── springsource.png 
    │ ├── javascripts 
    │ │ ├── application.js 
    │ │ └── jquery-2.1.3.js 
    │ └── stylesheets 
    │  ├── application.css 
    │  ├── errors.css 
    │  ├── main.css 
    │  └── mobile.css 

Teraz można odwołać css i js używając normalnego składni,

<assets:javascript src="admin/pathToYourJSFile"/> 
<assets:stylesheet src="admin/pathToYourCSSFile"/> 
<assets:stylesheet src="global/pathToYourCSSFile"/> 
Powiązane problemy