Approaches to minify js and css in grails applications

Question

I am working on minifying js and css files in grails application. My original plan is to use the resources plugin to minify the resources (also had a look at jawr and performance-ui, but resources seems to be de facto standard these days). Resources makes it easy to minify individual CSS files using YUI, but we have over 40 JS files, which we'd like to concatenate into a single file (and the files will need to be concatenated in the right order too) I haven't seen anything suggesting that Resources supports this out of the box, these are the approaches we have planned so far : Add new grails taglib to concatenate the js and css files to create one js and one css file and minify using the resources plugin. A naive implementation will mean the yui-minify runs every time the page is served (!!) so we'd need to inytroduce caching somehow. Use the BuildConfig 's grails.war.resources to minify the js and css. This would get round the caching issue, as the resource would only bebuilt and min…

Accepted Answer

You can make all your resources using the same bundle, with this, you will have only one merged js. Example:

```
main {
  resource id: 'mainjs', url: 'js/main.js'
  defaultBundle: 'mybundle'
}

second {
  resource id: 'secondjs', url: 'js/second.js'
  defaultBundle: 'mybundle'
}
```

According to the docs:

The "bundle" mapper adds together resources of the same type to reduce the number of files your client pages request.

The "bundle" mapper looks at the value of the "bundle" property on resources and if found, will add the resource to a new synthetic aggregated resource.

This aggregated resource is itself processed through mappers, so it is subject to the other optimisations you apply to the kind of resource the bundle is aggregating.

Bundles are always in the base directory of the static resources folder - which means references to files inside the bundle must be re-adjusted so they continue to refer to the same files. This is made possible for CSS files by the csspreprocessor and cssrewriter mappers.

Approaches to minify js and css in grails applications

Solution

Problem