Approaches to minify js and css in grails applications

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Approaches to minify js and css in grails applications

Kasun
Hi All,

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 :

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

  2. 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 minified at build time, but will require us to use grails run-war to test locally, hence any minification-related errors won't get caught until later in the dev cycle.

This must be a fairly common problem. What are other people doing? Would like to hear about any other approaches or best practices I can use.


Cheers,

Kasun

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

longwa
Maybe I'm not understanding but Resources already bundles everything together for you. If you look at what the browser sees, you'll see several "bundles":

All CSS 
All JS for head
All JS deferred (typically at the end, depending on where you put the layoutResources).

The order is driven by the order in the module IIRC, resolving dependsOn, etc.

-Aaron

On Mar 14, 2013, at 9:11 AM, Kasun Mathotage <[hidden email]> wrote:

Hi All,

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 :

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

  2. 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 minified at build time, but will require us to use grails run-war to test locally, hence any minification-related errors won't get caught until later in the dev cycle.

This must be a fairly common problem. What are other people doing? Would like to hear about any other approaches or best practices I can use.


Cheers,

Kasun


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

Andrew Todd
In reply to this post by Kasun
On Thu, Mar 14, 2013 at 9:11 AM, Kasun Mathotage <[hidden email]> wrote:

I am working on minifying js and css files in grails application.

This must be a fairly common problem. What are other people doing? Would like to hear about any other approaches or best practices I can use.

 I'm building/concatenating my JavaScript using a separate build module (in Maven) and I have an _Events.groovy script that does two things:

1) If Grails is running in development mode, it symlinks the concatenated but unminified JS from the JS module's target/ directory into web-app/js, allowing me to rebuild the JS without shutting down the app;

2) If Grails is not running in development mode, it grabs the JS Maven artifact and extracts the production-ready versions of the scripts into web-app/js, replacing the symlinks.

I won't way that this is ideal, but it does separate out the JS build, which is nice.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

Kasun
In reply to this post by longwa
Thanks, yes I was able to bundled the files. Now I want to compress the files to reduce the cache size more. Any thoughts ..
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

alxndrsn
On 19 March 2013 19:55, Kasun <[hidden email]> wrote:
> Thanks, yes I was able to bundled the files. Now I want to compress the files
> to reduce the cache size more. Any thoughts ..

zipped-resources plugin?

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

alxndrsn
On 19 March 2013 20:55, Alex Anderson
<[hidden email]> wrote:
> On 19 March 2013 19:55, Kasun <[hidden email]> wrote:
>> Thanks, yes I was able to bundled the files. Now I want to compress the files
>> to reduce the cache size more. Any thoughts ..
>
> zipped-resources plugin?

I just published yui-war-minify-plugin which will minify all
javascript and css at WAR build time.  Might be relevant.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

Kasun
Thanks :) 


On 8 April 2013 15:39, Alex Anderson <[hidden email]> wrote:
On 19 March 2013 20:55, Alex Anderson
<[hidden email]> wrote:
> On 19 March 2013 19:55, Kasun <[hidden email]> wrote:
>> Thanks, yes I was able to bundled the files. Now I want to compress the files
>> to reduce the cache size more. Any thoughts ..
>
> zipped-resources plugin?

I just published yui-war-minify-plugin which will minify all
javascript and css at WAR build time.  Might be relevant.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email



Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

sryan
Has anyone looked at integrating Grunt into the Grails build processes.   We not only need to minify but also need to combine multiple js files into one.

Scott Ryan

From: Kasun Mathotage <[hidden email]<mailto:[hidden email]>>
Reply-To: "[hidden email]<mailto:[hidden email]>" <[hidden email]<mailto:[hidden email]>>
Date: Monday, April 8, 2013 9:09 AM
To: "[hidden email]<mailto:[hidden email]>" <[hidden email]<mailto:[hidden email]>>
Subject: Re: [grails-user] Re: Approaches to minify js and css in grails applications

Thanks :)


On 8 April 2013 15:39, Alex Anderson <[hidden email]<mailto:[hidden email]>> wrote:
On 19 March 2013 20:55, Alex Anderson
<[hidden email]<mailto:[hidden email]>> wrote:
> On 19 March 2013 19:55, Kasun <[hidden email]<mailto:[hidden email]>> wrote:
>> Thanks, yes I was able to bundled the files. Now I want to compress the files
>> to reduce the cache size more. Any thoughts ..
>
> zipped-resources plugin?

I just published yui-war-minify-plugin which will minify all
javascript and css at WAR build time.  Might be relevant.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email




---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

alxndrsn
On 8 April 2013 18:42, Scott Ryan <[hidden email]> wrote:
> Has anyone looked at integrating Grunt into the Grails build processes.   We not only need to minify but also need to combine multiple js files into one.

At what stage would you want to do this?  Resources concatenates
multiple JS files into one, but I've no doubt that you could set up
grunt to do this instead, e.g. at war creation time and whenever a JS
file is changed.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Approaches to minify js and css in grails applications

mikelilin
In reply to this post by Kasun
i find a free online service to compress js and minify css, so it will reduce the size of web page.
Loading...