Using Jade As An HTML Preprocessor Through Nodefront

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.

Installing Node.js


The first thing you have to do is to install Node.js. That part was easy. Of course then I went the stupid route and tried installing Jade through it. Nope, you do that through the command line. The problem of course is I have no real idea of what Node.js is, what it does, or really anything. I just knew I needed it to install Jade.

Installing Jade

Jade - Node Template Engine

This is simple enough. Open a command line prompt and type:

$npm install jade

Install Nodefront


Nodefront is a command-line utility that speeds up front-end development. At least that is what the site says. I’m willing to take the creator’s word for it. What I do know, is this is the one tool I got to work for compiling Jade files. To install Nodefront, go to the command line, and type (note that $ just indicates the command line prompt):

$ npm install -g nodefront

Getting started with Jade

I am certainly not going to go over Jade’s syntax, as you can figure that out on your own by going to the link above. All you really have to do is create a new file with the .jade extension, and start writing your html with the Jade syntax.

To compile the Jade file, go to the command line, browse to your project folder and type this:

$ nodefront compile

If you want to compile ALL of the files in your project, such as in sub directories, type this:

$ nodefront compile -r

Other things you can do

There are a lot of things you can do with Nodefront, like go and get a jquery file. Go to the command line and for example, type:

$ nodefront fetch jquery -v 1.7.2

It will go out on the net and get that file and place it into your project folder. There are also options to tell it what directory to put it in. You can then insert the file into your jade file like this:

$ nodefront insert jquery-1.7.2.js index.jade

You can also minify your js or css if you so choose. And to note, Jade isn’t the only language Nodefront can compile. It does three by default (Jade, Stylus, and CoffeeScritpt), but you can get a bunch of others as well, which are list on the site. Sass being one of them, but I prefer to use Compass for that.

Final thoughts

While Jade eliminates a lot of the clutter and there is less to look at, it is harder for me to actually read. Although I do find it easier than Haml. At least at first glance. I am thinking of doing a redesign of my main website soon, and I might give it a try just to say I did. That will give me a clear picture on whether this is an abstraction I really want to go with. It is the same kind of abstraction that Sass is, and it could save time if you used the watch command to auto compile on change. BUT. The difference is, it almost elimates too much.

Sass adds a lot of features I use, like mixins, variables, nesting, and it’s .scss syntax is basically CSS at its core. Jade, in my case, simplifies the html, but loses its readability probably because my eye is so trained now to read html easily. I will give it a shot, and decide then. It could very well speed things up greatly after you get used to writing and reading it.

One thing that does bother me is the output html. I’m not using Jade like the typical user, and the HTML comes out condensed. No white space or breaks or indents. I have to auto format in my IDE to see if what I wrote is actually what I wanted. I know there is a way to change this, but I am not sure how. If you happen to know, please leave a comment and explain what you have to do.

UPDATE 1/28/13: A big thank you goes out to Karthik Viswanathan, for getting pretty HTML ability into Nodefront. To do so, make sure Nodefront is up to date (1.0 minimum), and create a folder called ‘.nf’ in your project. Yes, with a period. Then create a json file within it, called: ‘compile.json’. Finally, place this code in that file and compile:

    "compilerOptions": {
        "jade": { 
            "pretty": true

I am all for abstraction in cases like this, but when does it start to get silly? If I was using Jade, Sass, and CoffeeScript to build a project, I might need three command lines open watching for changes to compile. They simplify some things, but do they add a complexity of their own and even out on the benefits? I would say for Sass, it is the ultimate abstraction because the benefits besides the syntax reduction are outstanding. Jade, as an HTML preprocessor…I’m not so sure. But it was fun as hell to figure out how to get the basics of it going.

Tags: , , ,

Leave a Reply