User Tools

Site Tools


javascript:jade:getting_started

This is an old revision of the document!


Getting started

Installing Jade

To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an installer; on Linux, you should be able to use your package manager1).

Once you have Node.js installed, you have the choice of installing the Jade module so it's available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter:

npm install jade -g

When I am learning new Node.js modules, I prefer to install them on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter:

npm install jade

When this is done you should see a node_modules subdirectory inside your project directory. Inside node_modules will be the Jade modules as well as any other modules Jade depends on.

Creating an HTML fragment

Rendering strings in Jade to HTML

The first thing we are going to do is use Jade to produce an HTML fragment from a string literal. This is done with the jade.render method.

renderFragment.js
var jade = require('jade');
 
// Render an HTML fragment from a string literal written in Jade.
var htmlFrag = jade.render('p Hello, world');
 
console.log(htmlFrag);

output:

<p>Hello, world</p>

Compiling strings in Jade into functions

You can use the jade.compile method to create a function that when called will return the converted Jade.

compileFragment.js
var jade = require('jade');
 
// Compile a function that produces an HTML fragment from a string
// literal written in Jade.
var frag = jade.compile('p Hello, world');
 
// Render stuff.
var htmlFrag = frag();
 
console.log(htmlFrag);

output:

<p>Hello, world</p>

jade.renderFile

In a lot of cases, you will want to render code that is stored in a file rather than in a string literal or variable. You can do that with the jade.renderFile method.

myFrag.jade
h1 Hello, there!
p Nice to meet you.
renderFragmentFile_1.js
var jade = require('jade');
 
// Render an HTML fragment from a file written in Jade.
var htmlFrag = jade.renderFile('myFrag.jade');
 
console.log(htmlFrag);

output:

<h1>Hello, there!</h1><p>Nice to meet you.</p>

The above produces valid HTML, but it's hard to read. To make the output human-readable, we can pass jade.renderFile an options object with its pretty property set to true. (The options argument can be provided to the jade.render and jade.compile methods as well.)

renderFragmentFile_2.js
var jade = require('jade');
 
options = {
    pretty: true
};
 
// Render an HTML fragment from a file written in Jade.
var htmlFrag = jade.renderFile('myFrag.jade', options);
 
console.log(htmlFrag);

output:

<h1>Hello, there!</h1>
<p>Nice to meet you.</p>

You can (and should) also take anvantage of the callback that you can pass to jade.renderFile to handle errors:

renderFragmentFile_3.js
var jade = require('jade');
 
options = {
    pretty: true
};
 
// Render an HTML fragment from a file written in Jade.
// Use callback to trap errors.
var htmlFrag = jade.renderFile('myFrag.jade', options, function (err, html) {
        if (err) {
           throw(err);
        }
        return html;
    });
 
console.log(htmlFrag);

Writing output to file

To write the output created to a file, you'll need to use Node.js' fs module.

convertFragment.js
var jade = require('jade');
var fs = require('fs');
 
options = {
    pretty: true
};
 
// Render an HTML fragment from a file written in Jade.
var htmlFrag = jade.renderFile('myFrag.jade', options, function(err, html) {
        if (err) {
           throw(err);
        }
        return html;
    });
 
// Write HTML fragment to a file.
fs.writeFile('myFrag.html', htmlFrag, function(err) {
    if (err) {
        throw(err);
    }
});

output:

$ cat myFrag.html 
 
<h1>Hello, there!</h1>
<p>Nice to meet you.</p>
javascript/jade/getting_started.1395114486.txt.gz · Last modified: 2014/03/18 03:48 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki