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
javascript:jade:start [2014/03/18 03:42] – mithatjavascript:jade:start [2014/03/18 04:03] (current) – 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]]
 +  * [[Templating]]
 +  * [[Modularizing]]
javascript/jade/start.1395114178.txt.gz · Last modified: 2014/03/18 03:42 by mithat
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki