Reputation: 51393

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

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?

Through research I found the process written about here but they don't say how they did it.
http://blog.fogcreek.com/the-trello-tech-stack/

Upvotes: 10

Answers (5)

ReedD

Reputation: 997

I recommend using Grunt, with Grunt you can setup all kinds of workflows and tasks. I personally use mean.io as my boilerplate for most of my projects. They have a really nice Grunt file with most the tasks you need to concat and minify css and js into a single file using assetmanager. Mean.io doesn't use jade or stylus but you could easily add those Grunt tasks.

Upvotes: 0

tpower

Reputation: 56886

You can use the connect-assets pipeline to pull compiled Jade assets into your JavaScript by making them dependencies of the CoffeeScript files that use them.

I have a blog post with the details -> Server side compiling of Jade templates with connect-assets.

Upvotes: 0

GijsjanB

Reputation: 10044

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

Upvotes: 1

martyn

Reputation: 131

I wrote an open source project(MIT license) to address this problem:

Giles - https://github.com/255BITS/giles

Giles builds your static assets for you(Jade, Stylus, CoffeeScript). It can be run standalone, as a web server, or as a connect module. You can add support for other languages to Giles easily(see the github page)

Upvotes: 0