javascript:jade
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
javascript:jade [2014/03/17 23:35] – mithat | javascript:jade [2014/03/18 03:41] (current) – removed mithat | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Jade ====== | ||
- | |||
- | [[http:// | ||
- | |||
- | ===== 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:// | ||
- | |||
- | Once you have Node.js installed, you have the choice of installing it so it available system-wide or only for a particular project. To make it available system-wide, | ||
- | |||
- | 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 < | ||
- | |||
- | When this is done you should see a '' | ||
- | |||
- | ==== Creating an HTML fragment ==== | ||
- | |||
- | === jade.render === | ||
- | |||
- | 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 '' | ||
- | <file javascript render-fragment.js > | ||
- | var jade = require(' | ||
- | |||
- | // Render an HTML fragment from a string literal | ||
- | // written in Jade. | ||
- | var htmlFrag = jade.render(' | ||
- | |||
- | console.log(htmlFrag); | ||
- | </ | ||
- | |||
- | output: ''< | ||
- | |||
- | === jade.compile === | ||
- | |||
- | You can also create function that when called will return the fragment with the '' | ||
- | <file javascript compile-fragment.js> | ||
- | var jade = require(' | ||
- | |||
- | // Compile a function that produces an HTML fragment | ||
- | // from a string literal written in Jade. | ||
- | var frag = jade.compile(' | ||
- | |||
- | // Render stuff. | ||
- | var htmlFrag = frag(); | ||
- | |||
- | console.log(htmlFrag); | ||
- | </ | ||
- | |||
- | output: ''< | ||
- | |||
- | === jade.renderFile === | ||
- | |||
- | In a lot of cases, you will want to render code that is stored in a file rather than in a string variable or literal. You can do that with the '' | ||
- | |||
- | <file jade myFrag.jade> | ||
- | h1 Hello, there! | ||
- | p Nice to meet you. | ||
- | </ | ||
- | |||
- | <file javascript render-fragment-file1.js> | ||
- | var jade = require(' | ||
- | |||
- | // Render an HTML fragment from a file | ||
- | // written in Jade. | ||
- | var htmlFrag = jade.renderFile(' | ||
- | |||
- | console.log(htmlFrag); | ||
- | </ | ||
- | |||
- | output: ''< | ||
- | |||
- | The above produces output that is valid HTML but hard to read. To make the output human-readable, | ||
- | |||
- | <file javascript render-fragment-file2.js> | ||
- | var jade = require(' | ||
- | |||
- | options = { | ||
- | pretty: true | ||
- | }; | ||
- | |||
- | // Render an HTML fragment from a file | ||
- | // written in Jade. | ||
- | var htmlFrag = jade.renderFile(' | ||
- | |||
- | console.log(htmlFrag); | ||
- | </ | ||
- | |||
- | output: < | ||
- | < | ||
- | |||
- | === Writing output to file === | ||
- | To write the output created to a file, you'll need to use Node.js' | ||
- | |||
- | <file javascript convert-fragment-file.js> | ||
- | var jade = require(' | ||
- | var fs = require(' | ||
- | |||
- | options = { | ||
- | pretty: true | ||
- | }; | ||
- | |||
- | // Render an HTML fragment from a file | ||
- | // written in Jade. | ||
- | var htmlFrag = jade.renderFile(' | ||
- | |||
- | fs.writeFile(' | ||
- | </ | ||
- | |||
- | output:< | ||
- | $ cat myFrag.html | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
javascript/jade.1395099302.txt.gz · Last modified: 2014/03/17 23:35 by mithat