Combine, minify js, css [feature/module request]

[dennishall]

Probably best to use solder [https://github.com/brettstimmerman/solder].

It would also be nice to compress images. See html5boilerplate [https://github.com/paulirish/html5-boilerplate] for reference (although it's ant-based); depends: optipng, jpegtran.

[cliftonc]

+1 - I think it also needs an API wrapped around it, so that modules can do a

'calipso.theme.addJavascript('file'); calipso.theme.addStyle('file');

(or they can define these files in their exports? e.g. .styles = ['static/style.css'])

Themes could also define a js and css folder more explicitly in the theme.json so they can be scanned reliably. This means we could drop any bad inline js as well.

That then gives us a 'stack' of js and css that can then be combined and minified. It can be done as part of the bootstrap and not on each request, and the watch of these file types could trigger it to be re-run ...

The current method of having a 'static' folder in a module, that is then included is pretty much the sledgehammer approach to module includes ...

[dennishall]

Sounds like another dependency management situation. Require js might work out better for the js side of things. http://requirejs.org/docs/optimization.html. Even the order of stylesheets can make a difference, although I'm not inclined to support module-specific stylesheet ordering. In my view, module stylesheets can simply be appended to the list of stylesheets.

[nhunzaker]

Solder looks promising. Have we considered a implementing it through a view helper? Perhaps something like:

<%= javascript("first", "second, "third") %>
<%= stylesheet("first, second, third") %>

Which would compile them together at runtime. This is largely borrowed from the Rails community, but it may be an easier method to guarantee order.

[cliftonc]

Definitely, I once started to write one of these:

https://github.com/cliftonc/calipso/blob/master/lib/Helpers.js#L204

But never got around to finishing it. I guess the key decision is if we want to deal with the modularity server side or client side

e.g.

Option 1: we could just have each of the individual files exposed, and then a client side javascript loader loads them all.

Pros: More dynamic, only pull down the JS files required to work on the page you're on. Negative: Need to think about how module JS files are exposed in a robust way?

Option 2: we could concatenate and minify them all on the server side and send it in one go.

Pros: Simpler client side, more 'traditional'. Cons: We get a big hunk of JS on every page (not bad if it's cached of course).

What do you think?

[nhunzaker]

I think a cached, server side solution might be a cleaner. The user always has the option of using a traditional script tag if they want another behavior.