coffeescript, jade, stylus -> js, css asset manager? node.js

Question

I work in coffeescript, jade and stylus.

My application serves two different "one page apps". For these apps I serve all asset in the initial payload.

I want to group, compile, and concatenate all coffeescript files and jade templeates into a single js asset and stylus files into a single css asset for each "one page app".

Then I can just leave my /public/js and /public/css alone and they will always have the current js and css asset files for the two different apps.

Has anyone setup a workflow like this before? Any ideas how I could do this?

Thanks!!

EDIT: http://blog.fogcreek.com/the-trello-tech-stack/

Through more research I found the process written about here but they don't say how they did it.

Answer 1

You can do this with JS pretty simply with Express + Stitch / StitchUp

Sample config: https://gist.github.com/1094412

An alternative is also Interleave:

http://www.distractable.net/coding/javascript-builds-using-interleave

And the options for stylus middleware should sort you out for your CSS: http://learnboost.github.com/stylus/docs/middleware.html

There's also a myriad of options over here:

http://toolbox.no.de/search?q=asset

Answer 2

I wrote a node app for this. It is V E R Y simple, but it works for me. The code is so simple (72 lines) you can adjust it anyway you like. Whenever you save a coffee, stylus or jade file it converts to js, css or html. It doesn't take care of file removals or any other fancy stuff. It's not perfect, but at least I know exactly how it works, which makes debugging easy.

https://github.com/Gijsjan/Template-Engine-Watcher