Grails Asset-Pipeline system with 3rd party libs

Question

Grails 2.4 is now using the Asset Pipeline for managing and processing static assets in Grails applications instead of the Resources system. This is pretty new and there isn't much doc about it on the internet yet.

My question is, how to correctly handle 3rd party libraries?

For instance, the select2 (http://ivaynberg.github.io/select2/) library comes with all its .css, .js, image files in a single flat folder.

Should I copy the different file types in to their corresponding assets/javascripts/, assets/stylesheets/, etc. subfolders? What to do with files that don't really have an obvious location like the .json, text, or doc files?

Should I create a vendors/select2/ folder? Where, in assets/ or in web-app/? And then, how should I load all the necessary files from my GSPs?

This lib will also be needed only in a form view, and therefore shouldn't be loaded unless it's needed.

Answer 1

Baxxabit's answer led me to my solution. I've been struggling with much the same thing, but wanting to make the most of the pipeline so that I can use the less-asset-pipeline plugin.

Using bootstrap as an example, I created a vendor folder as a peer of the standard assets folders and then dropped the bootstrap files under there.

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

and application.css:

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

To override the boostrap customization I can simply drop a customized variables.less file into ./grails-app/assets/vendor/bootstrap-3.1.1/stylesheets/variables.less. The first folder under assets is ignored when it comes to overriding files, thereafter the path needs to match whatever you put under vendor.

This gives me this sort of hierarchy:

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

I like the result. I've got the distributed package cleanly delineated and relatively easily upgradable, and I've got my changes to that package separated off into a clearly identifiable customization file.

I've put an example using the sass-asset-pipeline plugin at https://github.com/ggascoigne/grails-pipeline-scss.

Answer 2

You can create another folder like jsplugins near standard folders (javascripts, styles, images), then you can include js library in the necessary pages, if you wouldn't use this library on all the pages.

Make something like this:

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

NB: you can omit first level path under assets path, in this example it's jsplugins.

The best way is to use manifest.js file, where you can include necessary files via require directive.

You should use assests folder instead of web-app. During building war file all the files from assets will be copied to web-app folder.

Useful video from Bobby Warner: http://www.youtube.com/watch?v=VHDBlGtAHB4

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