Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Open
dennishall opened this Issue · 5 comments

3 participants

@dennishall
Collaborator

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
Owner

+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
Collaborator

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
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.