2014-05-16 6 views
17

Grails 2.4 nun mit dem Asset-Pipeline für die Verwaltung und Verarbeitung von statischen Vermögenswerte in Grails-Anwendungen anstelle der Systemressourcen. Das ist ziemlich neu und es gibt noch nicht viel Doc im Internet.Grails Asset Pipeline-System mit 3rd-Party-Libs

Meine Frage ist, wie man 3rd-Party-Bibliotheken korrekt behandelt?

Zum Beispiel die select2 (http://ivaynberg.github.io/select2/) Bibliothek mit allen ihren .css, .js, Bilddateien in einem einzigen flachen Ordner.

Sollte ich die verschiedenen Dateitypen in die entsprechenden Unterordner assets/javascripts/, assets/stylesheets/ usw. kopieren? Was tun mit Dateien, die nicht wirklich einen eindeutigen Speicherort haben wie die .json-, Text- oder doc-Dateien?

Sollte ich einen Ordner vendors/select2/ erstellen? Wo, in assets/ oder in web-app/? Und dann, wie sollte ich alle notwendigen Dateien von meinen GSPs laden?

Diese Lib wird auch nur in einer Formularansicht benötigt und sollte daher nur geladen werden, wenn sie benötigt wird.

Antwort

19

Baxxabit Antwort führte mich zu meiner Lösung. Ich habe mit der gleichen Sache gekämpft, aber ich möchte das Beste aus der Pipeline machen, damit ich das low-asset-pipeline plugin verwenden kann.

Mit Bootstrap als Beispiel habe ich einen Lieferantenordner als Peer der Standard-Assets Ordner erstellt und dann die Bootstrap-Dateien unter dort abgelegt.

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 
... 

und application.css:

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

die Bootstrap-Anpassung außer Kraft zu setzen ich einfach eine maßgeschneiderte variables.less Datei in ./grails-app/assets fallen kann /vendor/bootstrap-3.1.1/stylesheets/variable.less. Der erste Ordner unter Assets wird ignoriert, wenn es um das Überschreiben von Dateien geht. Danach muss der Pfad mit dem übereinstimmen, was Sie unter Anbieter angeben.

Diese mir diese Art von Hierarchie gibt:

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 

möchte ich das Ergebnis. Ich habe das verteilte Paket sauber abgegrenzt und relativ leicht aktualisierbar, und ich habe meine Änderungen an diesem Paket in eine klar identifizierbare Anpassungsdatei getrennt.

Ich habe ein Beispiel mit dem Sass-Asset-Pipeline-Plugin bei https://github.com/ggascoigne/grails-pipeline-scss.

+0

Sie auch diese Struktur mit nutzen können Bower, nicht wahr? – genuinefafa

+0

Excellent beraten, dass sollte ein Teil des offiziellen Dokuments sein. Die Verwendung eines Manifests für jede Lib würde helfen, weiter zu skalieren, wenn Sie mehr als zwei Bibliotheken haben. 'bower' hat eine schöne Stelle in diesem Bild, obwohl du noch Sachen von bower_components in Assets kopieren musst. – youri

+0

Ich benutze Bower für meine Front-End-Assets und Ihr Github-Projekt hat immens geholfen. – dspies

2

Sie können einen anderen Ordner wie jsplugins in der Nähe von Standardordnern (Javascripts, Styles, Images) erstellen, dann können Sie die js-Bibliothek in die erforderlichen Seiten einfügen, wenn Sie diese Bibliothek nicht auf allen Seiten verwenden würden.

so etwas wie dieses Fabrikat:

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

NB: Sie erste Ebene Pfad unter assets Pfad weglassen kann, in diesem Beispiel es jsplugins ist.

Der beste Weg ist, manifest.js Datei zu verwenden, wo Sie notwendige Dateien über require Direktive aufnehmen können.

Sie sollten assests Ordner anstelle von Web-App verwenden. Während der Erstellung der WAR-Datei werden alle Dateien aus den Assets in den Web-App-Ordner kopiert.

Nützliches Video von Bobby Warner: http://www.youtube.com/watch?v=VHDBlGtAHB4

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

2

Asset-Pipeline scheint mir ein Rückschritt zu sein. Ich kann anscheinend nicht mehr cdnjs oder ähnliche CDNs für den Zugriff auf externe Bibliotheken verwenden. Tue ich das wirklich alles, um JS-Vereinheitlichung für meinen eigenen JS-Code zu bekommen?

+0

Ich denke, das "Bereitstellen von Assets aus dem externen Speicherverzeichnis" in der Asset-Pipeline-Dokumentation (http://bertramdev.github.io/asset-pipeline/guide) /index.html) könnte Ihnen bei der Verwendung von CDNs helfen. – jkwuc89

+5

Nein, ich möchte keine Inhalte in cdnjs kopieren. Ich möchte nur cdnjs-servierte Assets in meiner App verwenden. – ben3000

0

Das funktioniert gut für Assets unter dem Asset-Ordner, aber angesichts der Verbreitung von Web-Komponenten und Javascript-Frameworks finden wir oft außerhalb eines Grails-Projekts externe Projekte, die wir mit unserer Anwendung verpacken und verteilen wollen . Es gibt auch Fälle, in denen das Front-End einer Anwendung von Front-End-Entwicklern bearbeitet wird, die keine Grals-Entwickler sind, und sie verwenden verschiedene Tools, um das Front-End auf eine Weise zu entwickeln und zu testen, die von den REST-Diensten von Grails getrennt ist.

Anstatt also die Assets eines externen Projekts in Ihre Grails-App zu kopieren, machen Sie einen Verweis auf externe Ordner, die sicherstellen, dass diese Assets in Ihrer App enthalten sind, wenn Sie die App während der Entwicklung ausführen wenn Sie die App für die Bereitstellung WAREN?

-1

3rd-Party-Bibliotheken zu behandeln, können Sie flipcountdown Ordner in Assets Ordner

 
    ├── 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 

Jetzt können Sie CSS und JS,

mit normalen Syntax Referenz hinzufügen
<assets:javascript src="admin/pathToYourJSFile"/> 
<assets:stylesheet src="admin/pathToYourCSSFile"/> 
<assets:stylesheet src="global/pathToYourCSSFile"/>