Posts Tagged ‘nodejs’

Using Jade As An HTML Preprocessor Through Nodefront

Monday, September 24th, 2012
Using Jade As An HTML Preprocessor Through Nodefront

No CodeKit for PC…now what?

I have been watching Chris Coyier’s redesign videos and have been learning a lot from the first few I’ve seen. I remembered him talking about using Jade. He hasn’t gone into it in the videos, and I will assume he is not using it in the redesign, but I haven’t gotten far enough to know. What is Jade? It is a template engine that according to the documentation, is heavily influenced by Haml, an HTML preprocessor. You know, take out all the cluttered syntax? Of course Jade can do a lot more, but I was mainly interested in using it for its most basic use. Get rid of some clutter in my HTML.

The main problem though is Chris uses Codekit, which does a lot of cool things, and one seems to be compiling the Jade files into HTML. Unfortunately, CodeKit is only for the Mac with no real hope of ever crossing over. So I needed to find a different way to get Jade to work for me. Not an easy task for someone who has no idea how to even impliment it. After a lot of reading and searching, this is how I got it to work.

UPDATE 1/28/13: Below in the Final Thoughts section I mention that I wish Nodefront could output pretty html (non-condensed). I was informed a short while ago by the creator that it can. See the Update section further down to read how.