Mithat Konar (the wiki)

User Tools

Site Tools

You are here: Mithat Konar (the wiki) » JavaScript stuff » Jade
javascript:jade:start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
javascript:jade:start [2014/03/18 03:42] – mithatjavascript:jade:start [2014/03/18 03:59] – mithat
Line 1: Line 1:
 ====== Jade ====== ====== Jade ======
  
-[[http://jade-lang.com|Jade]] is billed as a template engine for [[http://nodejs.org/|Node.js]], but it could be thought of as a language that makes writing HTML easier that also lets you do templating. +[[http://jade-lang.com|Jade]] is billed as a template engine for [[http://nodejs.org/|Node.js]], but it could be thought of as a language that makes writing HTML easier and that also lets you do templating. Here are some notes on learning how to use Jade. I will add to them as my CopiousFreeTime™ allows me to learn more.
- +
-===== 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 [[http://nodejs.org/download/|installer]]; on Linux, you should be able to [[https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager|use your package manager]]((See http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.)). +
- +
-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: <code>npm install jade -g</code> +
- +
-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: <code>npm install jade</code> +
- +
-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. +
-<file javascript 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); +
-</file> +
- +
-output: <code><p>Hello, world</p></code> +
- +
-=== 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. +
-<file javascript 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); +
-</file> +
- +
-output: <code><p>Hello, world</p></code> +
- +
-=== 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. +
- +
-<file jade myFrag.jade> +
-h1 Hello, there! +
-p Nice to meet you. +
-</file> +
- +
-<file javascript 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); +
-</file> +
- +
-output: <code><h1>Hello, there!</h1><p>Nice to meet you.</p></code> +
- +
-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.) +
- +
-<file javascript 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); +
-</file> +
- +
-output: <code><h1>Hello, there!</h1> +
-<p>Nice to meet you.</p></code> +
- +
-You can (and should) also take anvantage of the callback that you can pass to ''jade.renderFile'' to handle errors: +
-<file javascript 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); +
-</file> +
- +
-=== Writing output to file === +
-To write the output created to a file, you'll need to use Node.js' ''fs'' module. +
- +
-<file javascript 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); +
-    } +
-}); +
-</file> +
- +
-output:<code bash> +
-$ cat myFrag.html  +
- +
-<h1>Hello, there!</h1> +
-<p>Nice to meet you.</p> +
-</code>+
  
 +  * [[Getting started]]
javascript/jade/start.txt · Last modified: 2014/03/18 04:03 by mithat
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki