> Matts recent mail on wro4j got me thinking.
>
http://code.google.com/p/wro4j/ > So we can easily just reuse wro4j as a separate filter to let us group
> CSS and JS files together for minimising and turning into a single
> browser request to boost page load times and increasing modularity of
> files etc.
> I wondered if we could do a little better though. A few background
> motivations:
> * sometimes layouts declare a dependency on some css/JS and sometimes
> its a snippet/template/dynamic include etc.
> e.g. its quite common to have global CSS/JS for a site, then custom
> pages add a few extra bits and bobs which you want to replace with a
> single group file. So the set of includes could be dynamic at runtime;
> but we still may wish to have a single cached, static file with those
> files together
> * maintaining the separate groups file seems a separate level of
> indirection that makes it harder to just hack up templates and
> refactor them into layouts / includes / snippets etc.
> * I prefer hacking jade + scala to XML :)
> * in development we often want to use the actual individual includes
> as its then easier to use line numbers and see which files need
> changing in the developer console in Safari/Chrome/FireBug etc.
> So rather than doing this...
> http://code.google.com/p/wro4j/wiki/GettingStarted
> <groups xmlns="http://www.isdc.ro/wro">
> <group name="g1">
> <js>classpath:com/mysite/resource/js/1.js</js>
> <css>classpath:com/mysite/resource/css/1.css</css>
> <group-ref>g2</group-ref>
> </group>
> <group name="g2">
> <js>/dwr/engine.js</js>
> <group-ref>g3</group-ref>
> <css>classpath:/static/css/2.css</css>
> <js>classpath:/static/*.js</js>
> </group>
> <group name="g3">
> <css>/static/css/style.css</css>
> <css>/static/css/global/*.css</css>
> <js>/static/js/**</js>
> <js>http://www.site.com/static/plugin.js</js>
> </group>
> </groups>
> then doing this... in a jade layout
> html
> head
> link(rel="stylesheet" type="text/css" href="/wro/g2.css")
> script(type="text/javascript" src="/wro/g2.js")
> we could instead just leave the actual includes in the templates using
> the real names; then dynamically render them either as separate files
> or a single group file.
> e.g. anywhere in a template, snippet or layout we could include code
> like this (allowing multiple arguments)...
> - linkCss("/static/css/2.css")
> - scriptJs("http://www.site.com/static/plugin.js")
> then in the template
> html
> head
> - linkCss("/static/css/3.css")
> - scriptJs("foo/bar.js")
> = includeCssAndJs
> then the includeCssAndJs function can firstly get rid of any duplicate
> link/script tags (using the URIs of the sources as the unique key),
> but it can also either use the actual separate link/script tags if in
> development mode or replace the current set of includes with some
> 'group' link/script and generate the wro4j group on the fly without
> having to maintain a separate XML file.
> e.g. depending on the development mode (and/or flag in the Scalate
> Console) we could render the above as
> <html>
> <head>
> <link href="/static/css/2.css" rel="stylesheet" type="text/css"></link>
> <link href="/static/css/3.css" rel="stylesheet" type="text/css"></link>
> <script type='text/javascript'
> src="http://www.site.com/static/plugin.js"></script>
> <script type='text/javascript' src="foo/bar.js"></script>
> </head>
> ...
> </head>
> or the 'minimised' version
> <html>
> <head>
> <link href="/groups/g1.css" rel="stylesheet" type="text/css"></link>
> <script type='text/javascript' src="groups/g1.js"></script>
> </head>
> ...
> </head>
> where it could just auto-generate numbered groups; or we could provide
> a little mapping of lists of URIs => group names.
> All we'd need is a few new helper scala functions to declare new
> link/script tags (with helper methods for CSS and JS the common
> flavours of those) and a includeCssAndJs method to render them in the
> layout.
> Thoughts?
> --
> James
> -------
> FuseSource
> Email: ja...@fusesource.com
> Web: http://fusesource.com
> Twitter: jstrachan, fusenews
> Blog: http://macstrac.blogspot.com/
> Open Source Integration and Messaging
