Jade —— 源于 Node.js 的 HTML 模板引擎
Jade —— 源于 Node.js 的 HTML 模板引擎
- 開(kāi)源項(xiàng)目介紹 ?
- web ?
- 模板引擎 ?
- node.js ?
- jade
Jade 是一個(gè)高性能的模板引擎，它深受?Haml?影響，它是用 JavaScript 實(shí)現(xiàn)的，并且可以供?Node?使用。
試玩
你可以在網(wǎng)上試玩 Jade。
特性
- 客戶端支持
- 代碼高可讀
- 靈活的縮進(jìn)
- 塊展開(kāi)
- Mixins
- 靜態(tài)包含
- 屬性改寫(xiě)
- 安全，默認(rèn)代碼是轉(zhuǎn)義的
- 運(yùn)行時(shí)和編譯時(shí)上下文錯(cuò)誤報(bào)告
- 命令行下編譯jade模板
- HTML5 模式 (使用?!!! 5?文檔類型)
- 在內(nèi)存中緩存(可選)
- 合并動(dòng)態(tài)和靜態(tài)標(biāo)簽類
- 可以通過(guò)?filters?修改樹(shù)
- 模板繼承
- 原生支持?Express JS
- 通過(guò)?each?枚舉對(duì)象、數(shù)組甚至是不能枚舉的對(duì)象
- 塊注釋
- 沒(méi)有前綴的標(biāo)簽
- AST Filters
- 過(guò)濾器
- :stylus?必須已經(jīng)安裝?stylus
- :less?必須已經(jīng)安裝?less.js
- :markdown?必須已經(jīng)安裝?markdown-js?或者?node-discount
- :cdata
- :coffeescript?必須已經(jīng)安裝coffee-script
- Emacs Mode
- Vim Syntax
- TextMate Bundle
- Coda/SubEtha syntax Mode
- Screencasts
- html2jade?轉(zhuǎn)換器
其它實(shí)現(xiàn)
jade有其他語(yǔ)言的實(shí)現(xiàn)，可以實(shí)現(xiàn)前后端渲染的統(tǒng)一：
- php
- scala
- ruby
- python
- java
安裝
npm install jade瀏覽器支持
把 Jade 編譯為一個(gè)可供瀏覽器使用的單文件，只需要簡(jiǎn)單的執(zhí)行:
make jade.js如果你已經(jīng)安裝了 uglifyjs (npm install uglify-js)，你可以執(zhí)行下面的命令它會(huì)生成所有的文件。其實(shí)每一個(gè)正式版本里都幫你做了這事。
make jade.min.js默認(rèn)情況下，為了方便調(diào)試Jade會(huì)把模板組織成帶有形如?__.lineno = 3?的行號(hào)的形式。 在瀏覽器里使用的時(shí)候，你可以通過(guò)傳遞一個(gè)選項(xiàng)?{ compileDebug: false }?來(lái)去掉這個(gè)。
下面的模板
會(huì)被翻譯成下面的函數(shù)：
function anonymous(locals, attrs, escape, rethrow) { var buf = []; with (locals || {}) { var interp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); }通過(guò)使用 Jade 的?./runtime.js你可以在瀏覽器使用這些預(yù)編譯的模板而不需要使用 Jade, 你只需要使用?runtime.js?里的工具函數(shù), 它們會(huì)放在?jade.attrs,?jade.escape?這些里。 把選項(xiàng)?{ client: true }?傳遞給?jade.compile(), Jade 會(huì)把這些幫助函數(shù)的引用放在jade.attrs,?jade.escape.
function anonymous(locals, attrs, escape, rethrow) { var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow; var buf = []; with (locals || {}) { var interp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); }API
var jade = require('jade');// Compile a function var fn = jade.compile('string of jade', options); fn(locals);選項(xiàng)
- self?使用?self?命名空間來(lái)持有本地變量.?(默認(rèn)為?false)
- locals?本地變量對(duì)象
- filename?異常發(fā)生時(shí)使用，includes 時(shí)必需
- debug?輸出 token 和翻譯后的函數(shù)體
- compiler?替換掉 jade 默認(rèn)的編譯器
- compileDebug?false的時(shí)候調(diào)試的結(jié)構(gòu)不會(huì)被輸出
- pretty?為輸出加上了漂亮的空格縮進(jìn)?(默認(rèn)為?false)
標(biāo)簽
標(biāo)簽就是一個(gè)簡(jiǎn)單的單詞:
html它會(huì)被轉(zhuǎn)換為?<html></html>
標(biāo)簽也是可以有 id 的:
div它會(huì)被轉(zhuǎn)換為?<div id="container"></div>
怎么加 class 呢？
div.user-details轉(zhuǎn)換為?<div class="user-details"></div>
多個(gè) class 和 id? 也是可以搞定的:
div#foo.bar.baz轉(zhuǎn)換為?<div id="foo" class="bar baz"></div>
不停的?div div div?很討厭啊 , 可以這樣:
#foo .bar這個(gè)算是我們的語(yǔ)法糖，它已經(jīng)被很好的支持了，上面的會(huì)輸出：
<div id="foo"></div><div class="bar"></div>標(biāo)簽文本
只需要簡(jiǎn)單的把內(nèi)容放在標(biāo)簽之后：
p wahoo!它會(huì)被渲染為?<p>wahoo!</p>.
很帥吧，但是大段的文本怎么辦呢：
p| foo bar baz| rawr rawr| super cool| go jade go渲染為?<p>foo bar baz rawr.....</p>
怎么和數(shù)據(jù)結(jié)合起來(lái)？ 所有類型的文本展示都可以和數(shù)據(jù)結(jié)合起來(lái)，如果我們把?{ name: 'tj', email: 'tj@vision-media.ca' }?傳給編譯函數(shù)，下面是模板上的寫(xiě)法:
它會(huì)被渲染為?<div id="user">tj <tj@vision-media.ca></div>
當(dāng)就是要輸出?#{}?的時(shí)候怎么辦? 轉(zhuǎn)義一下!
p \#{something}它會(huì)輸出?<p>#{something}</p>
同樣可以使用非轉(zhuǎn)義的變量?!{html}, 下面的模板將直接輸出一個(gè)?<script>?標(biāo)簽:
- var html = "<script></script>" | !{html}內(nèi)聯(lián)標(biāo)簽同樣可以使用文本塊來(lái)包含文本：
label| Username:input(name='user[name]')或者直接使用標(biāo)簽文本:
label Username:input(name='user[name]')只?包含文本的標(biāo)簽，比如?<script>,?<style>, 和?<textarea>?不需要前綴?|?字符, 比如:
htmlheadtitle Examplescriptif (foo) {bar();} else {baz();}這里還有一種選擇，可以使用?.?來(lái)開(kāi)始一段文本塊，比如：
p.foo asdfasdfasdfasdfafasdfasd.會(huì)被渲染為:
<p>foo asdf asdfasdfasdfafasdf asd . </p>這和帶一個(gè)空格的?.?是不一樣的, 帶空格的會(huì)被 Jade 的解析器忽略，當(dāng)作一個(gè)普通的文字:
p .渲染為:
<p>.</p>需要注意的是文本塊需要兩次轉(zhuǎn)義。比如想要輸出下面的文本：
</p>foo\bar</p>使用:
p.foo\\bar注釋
單行注釋和 JavaScript 里是一樣的，通過(guò)?//?來(lái)開(kāi)始，并且必須單獨(dú)一行：
// just some paragraphs p foo p bar渲染為：
<!-- just some paragraphs --> <p>foo</p> <p>bar</p>Jade 同樣支持不輸出的注釋，加一個(gè)短橫線就行了：
//- will not output within markup p foo p bar渲染為：
<p>foo</p> <p>bar</p>塊注釋
塊注釋也是支持的：
body//渲染為：
<body><!--<div id="content"><h1>Example</h1></div>--> </body>Jade 同樣很好的支持了條件注釋：
body//if IEa(href='http://www.mozilla.com/en-US/firefox/') Get Firefox渲染為：
<body><!--[if IE]><a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a><![endif]--> </body>內(nèi)聯(lián)
Jade 支持以自然的方式定義標(biāo)簽嵌套:
ulli.firsta(href='#') foolia(href='#') barli.lasta(href='#') baz塊展開(kāi)
塊展開(kāi)可以幫助你在一行內(nèi)創(chuàng)建嵌套的標(biāo)簽，下面的例子和上面的是一樣的：
ulli.first: a(href='#') foo li: a(href='#') barli.last: a(href='#') bazCase
case?表達(dá)式按下面這樣的形式寫(xiě):
htmlbodyfriends = 10case friends when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends塊展開(kāi)在這里也可以使用:
friends = 5htmlbodycase friends when 0: p you have no friends when 1: p you have a friend default: p you have #{friends} friends屬性
Jade 現(xiàn)在支持使用?(?和?)?作為屬性分隔符
a(href='/login', title='View login page') Login當(dāng)一個(gè)值是?undefined?或者?null?屬性?不?會(huì)被加上,
所以呢，它不會(huì)編譯出 'something="null"'.
Boolean 屬性也是支持的:
input(type="checkbox", checked)使用代碼的 Boolean 屬性只有當(dāng)屬性為?true?時(shí)才會(huì)輸出：
input(type="checkbox", checked=someValue)多行同樣也是可用的：
input(type='checkbox',name='agreement',checked)多行的時(shí)候可以不加逗號(hào)：
input(type='checkbox'name='agreement'checked)加點(diǎn)空格，格式好看一點(diǎn)？同樣支持
input(type='checkbox'name='agreement'checked)冒號(hào)也是支持的:
rss(xmlns:atom="atom")假如我有一個(gè)?user?對(duì)象?{ id: 12, name: 'tobi' }
我們希望創(chuàng)建一個(gè)指向?/user/12?的鏈接?href, 我們可以使用普通的 JavaScript 字符串連接，如下:
或者我們使用 Jade 的修改方式, 這個(gè)我想很多使用 Ruby 或者 CoffeeScript 的人會(huì)看起來(lái)像普通的 JS..:
a(href='/user/#{user.id}')= user.nameclass?屬性是一個(gè)特殊的屬性，你可以直接傳遞一個(gè)數(shù)組，比如?bodyClasses = ['user', 'authenticated']?:
body(class=bodyClasses)HTML
內(nèi)聯(lián)的 HTML 是可以的，我們可以使用管道定義一段文本 :
htmlbody| <h1>Title</h1>| <p>foo bar baz</p>或者我們可以使用?.?來(lái)告訴 Jade 我們需要一段文本：
htmlbody.<h1>Title</h1><p>foo bar baz</p>上面的兩個(gè)例子都會(huì)渲染成相同的結(jié)果：
<html><body><h1>Title</h1> <p>foo bar baz</p> </body></html>這條規(guī)則適應(yīng)于在 Jade 里的任何文本：
htmlbodyh1 User <em>Doctypes
添加文檔類型只需要簡(jiǎn)單的使用?!!!, 或者?doctype?跟上下面的可選項(xiàng):
!!!會(huì)渲染出?transitional?文檔類型, 或者:
!!! 5或
!!! html或
doctype htmlDoctype 是大小寫(xiě)不敏感的, 所以下面兩個(gè)是一樣的:
doctype Basic doctype basic當(dāng)然也是可以直接傳遞一段文檔類型的文本：
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"渲染后:
會(huì)輸出?HTML5?文檔類型. 下面的默認(rèn)的文檔類型，可以很簡(jiǎn)單的擴(kuò)展：
var doctypes = exports.doctypes = {'5': '通過(guò)下面的代碼可以很簡(jiǎn)單的改變默認(rèn)的文檔類型：
jade.doctypes.default = 'whatever you want';過(guò)濾器
過(guò)濾器前綴?:, 比如?:markdown?會(huì)把下面塊里的文本交給專門(mén)的函數(shù)進(jìn)行處理。查看頂部?特性?里有哪些可用的過(guò)濾器。
body:markdownWoah! jade _and_ markdown, very **cool**we can even link to [stuff](http://google.com)渲染為:
<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://google.com">stuff</a></p></body>代碼
Jade 目前支持三種類型的可執(zhí)行代碼。第一種是前綴?-， 這是不會(huì)被輸出的：
- var foo = 'bar';這可以用在條件語(yǔ)句或者循環(huán)中：
- for (var key in obj)p= obj[key]由于 Jade 的緩存技術(shù)，下面的代碼也是可以的：
哈哈，甚至是很長(zhǎng)的循環(huán)也是可以的：
- if (items.length)ul- items.forEach(function(item){ li= item - })所以你想要的！
下一步我們要?轉(zhuǎn)義?輸出的代碼，比如我們返回一個(gè)值，只要前綴一個(gè)?=：
- var foo = 'bar' = foo h1= foo它會(huì)渲染為?bar<h1>bar</h1>. 為了安全起見(jiàn)，使用?=?輸出的代碼默認(rèn)是轉(zhuǎn)義的,如果想直接輸出不轉(zhuǎn)義的值可以使用?!=：
p!= aVarContainingMoreHTMLJade 同樣是設(shè)計(jì)師友好的，它可以使 JavaScript 更直接更富表現(xiàn)力。比如下面的賦值語(yǔ)句是相等的，同時(shí)表達(dá)式還是通常的 JavaScript：
- var foo = 'foo ' + 'bar' foo = 'foo ' + 'bar'Jade 會(huì)把?if,?else if,?else,?until,?while,?unless?同別的優(yōu)先對(duì)待, 但是你得記住它們還是普通的 JavaScript：
if foo == 'bar'ulli yay li foo li worked else p oh no! didnt work循環(huán)
盡管已經(jīng)支持 JavaScript 原生代碼，Jade 還是支持了一些特殊的標(biāo)簽，它們可以讓模板更加易于理解，其中之一就是?each, 這種形式：
each VAL[, KEY] in OBJ一個(gè)遍歷數(shù)組的例子 ：
- var items = ["one", "two", "three"] each item in items li= item渲染為:
<li>one</li> <li>two</li> <li>three</li>遍歷一個(gè)數(shù)組同時(shí)帶上索引：
items = ["one", "two", "three"] each item, i in itemsli #{item}: #{i}渲染為:
<li>one: 0</li> <li>two: 1</li> <li>three: 2</li>遍歷一個(gè)數(shù)組的鍵值：
obj = { foo: 'bar' } each val, key in objli #{key}: #{val}將會(huì)渲染為：<li>foo: bar</li>
Jade 在內(nèi)部會(huì)把這些語(yǔ)句轉(zhuǎn)換成原生的 JavaScript 語(yǔ)句，就像使用?users.forEach(function(user){, 詞法作用域和嵌套會(huì)像在普通的 JavaScript 中一樣：
each user in userseach role in user.rolesli= role如果你喜歡，也可以使用?for?：
for user in usersfor role in user.rolesli= role條件語(yǔ)句
Jade 條件語(yǔ)句和使用了(-) 前綴的 JavaScript 語(yǔ)句是一致的,然后它允許你不使用圓括號(hào)，這樣會(huì)看上去對(duì)設(shè)計(jì)師更友好一點(diǎn)，
同時(shí)要在心里記住這個(gè)表達(dá)式渲染出的是?常規(guī)?JavaScript：
和下面的使用了常規(guī) JavaScript 的代碼是相等的：
for user in users- if (user.role == 'admin')p #{user.name} is an admin - else p= user.nameJade 同時(shí)支持?unless, 這和?if (!(expr))?是等價(jià)的：
for user in usersunless user.isAnonymousp| Click to viewa(href='/users/' + user.id)= user.name模板繼承
Jade 支持通過(guò)?block?和?extends?關(guān)鍵字來(lái)實(shí)現(xiàn)模板繼承。 一個(gè)塊就是一個(gè) Jade 的 block ，它將在子模板中實(shí)現(xiàn)，同時(shí)是支持遞歸的。
Jade 塊如果沒(méi)有內(nèi)容，Jade 會(huì)添加默認(rèn)內(nèi)容，下面的代碼默認(rèn)會(huì)輸出?block scripts,?block content, 和?block foot.
htmlheadh1 My Site - #{title}block scripts現(xiàn)在我們來(lái)繼承這個(gè)布局，簡(jiǎn)單創(chuàng)建一個(gè)新文件，像下面那樣直接使用?extends，給定路徑（可以選擇帶?.jade?擴(kuò)展名或者不帶）. 你可以定義一個(gè)或者更多的塊來(lái)覆蓋父級(jí)塊內(nèi)容, 注意到這里的?foot?塊?沒(méi)有?定義，所以它還會(huì)輸出父級(jí)的 "some footer content"。
extends extend-layoutblock scriptsscript(src='/jquery.js')script(src='/pets.js')block contenth1= titleeach pet in petsinclude pet同樣可以在一個(gè)子塊里添加塊，就像下面實(shí)現(xiàn)的塊?content?里又定義了兩個(gè)可以被實(shí)現(xiàn)的塊?sidebar?和?primary，或者子模板直接實(shí)現(xiàn)?content。
extends regular-layoutblock content.sidebar block sidebar p nothing .primary block primary p nothing前置、追加代碼塊
Jade允許你?替換?（默認(rèn)）、?前置?和?追加?blocks. 比如，假設(shè)你希望在?所有?頁(yè)面的頭部都加上默認(rèn)的腳本，你可以這么做：
htmlheadblock headscript(src='/vendor/jquery.js')script(src='/vendor/caustic.js')bodyblock content現(xiàn)在假設(shè)你有一個(gè)Javascript游戲的頁(yè)面，你希望在默認(rèn)的腳本之外添加一些游戲相關(guān)的腳本，你可以直接append上代碼塊：
extends layoutblock append headscript(src='/vendor/three.js')script(src='/game.js')使用?block append?或?block prepend?時(shí)?block?是可選的:
extends layoutappend headscript(src='/vendor/three.js')script(src='/game.js')包含
Includes 允許你靜態(tài)包含一段 Jade, 或者別的存放在單個(gè)文件中的東西比如 CSS, HTML 非常常見(jiàn)的例子是包含頭部和頁(yè)腳。 假設(shè)我們有一個(gè)下面目錄結(jié)構(gòu)的文件夾：
./layout.jade ./includes/./head.jade./tail.jade下面是?layout.jade?的內(nèi)容:
htmlinclude includes/head bodyh1 My Site p Welcome to my super amazing site. include includes/foot這兩個(gè)包含?includes/head?和?includes/foot?都會(huì)讀取相對(duì)于給?layout.jade?參數(shù)filename?的路徑的文件, 這是一個(gè)絕對(duì)路徑，不用擔(dān)心Express幫你搞定這些了。Include 會(huì)解析這些文件，并且插入到已經(jīng)生成的語(yǔ)法樹(shù)中，然后渲染為你期待的內(nèi)容：
<html><head><title>My Site</title> <script src="/javascripts/jquery.js"> </script><script src="/javascripts/app.js"></script> </head> <body> <h1>My Site</h1> <p>Welcome to my super lame site.</p> <div id="footer"> <p>Copyright>(c) foobar</p> </div> </body> </html>前面已經(jīng)提到，include?可以包含比如 HTML 或者 CSS 這樣的內(nèi)容。給定一個(gè)擴(kuò)展名后，Jade 不會(huì)把這個(gè)文件當(dāng)作一個(gè) Jade 源代碼，并且會(huì)把它當(dāng)作一個(gè)普通文本包含進(jìn)來(lái)：
htmlhead//- css and js have simple filters that wrap them in<style> and <script> tags, respectivelyinclude stylesheet.cssinclude script.js body //- "markdown" files will use the "markdown" filter to convert Markdown to HTML include introduction.markdown //- html files have no filter and are included verbatim include content.htmlInclude 也可以接受塊內(nèi)容，給定的塊將會(huì)附加到包含文件?最后?的塊里。 舉個(gè)例子，head.jade?包含下面的內(nèi)容：
headscript(src='/jquery.js')我們可以像下面給include head添加內(nèi)容, 這里是添加兩個(gè)腳本.
htmlinclude headscript(src='/foo.js')script(src='/bar.js')bodyh1 test在被包含的模板中，你也可以使用yield語(yǔ)句。yield語(yǔ)句允許你明確地標(biāo)明include的代碼塊的放置位置。比如，假設(shè)你希望把代碼塊放在scripts之前，而不是附加在scripts之后：
headyieldscript(src='/jquery.js')script(src='/jquery.ui.js')由于被包含的Jade會(huì)按字面解析并合并到AST中，詞法范圍的變量的效果和直接寫(xiě)在同一個(gè)文件中的相同。這就意味著include可以用作partial的替代，例如，假設(shè)我們有一個(gè)引用了user變量的user.jade`文件：
h1= user.name p= user.occupation接著，當(dāng)我們迭代users的時(shí)候，只需簡(jiǎn)單地加上include user。因?yàn)樵谘h(huán)中user變量已經(jīng)被定義了，被包含的模板可以訪問(wèn)它。
users = [{ name: 'Tobi', occupation: 'Ferret' }]each user in users .user include user以上代碼會(huì)生成：
<div class="user"><h1>Tobi</h1> <p>Ferret</p> </div>user.jade引用了user變量，如果我們希望使用一個(gè)不同的變量user，那么我們可以直接定義一個(gè)新變量user = person，如下所示：
each person in users.useruser = personMixins
Mixins 在編譯的模板里會(huì)被 Jade 轉(zhuǎn)換為普通的 JavaScript 函數(shù)。 Mixins 可以帶參數(shù)，但不是必需的：
mixin listulli foo li bar li baz使用不帶參數(shù)的 mixin 看上去非常簡(jiǎn)單，在一個(gè)塊外：
h2 Groceries mixin listMixins 也可以帶一個(gè)或者多個(gè)參數(shù)，參數(shù)就是普通的 JavaScript 表達(dá)式，比如下面的例子：
mixin pets(pets)ul.pets會(huì)輸出像下面的 HTML:
<div class="user"><h2>tj</h2> <ul class="pets"> <li>tobi</li> <li>loki</li> <li>jane</li> <li>manny</li> </ul> </div>產(chǎn)生輸出
假設(shè)我們有下面的 Jade 源碼：
- var title = 'yay' h1.title當(dāng)?compileDebug?選項(xiàng)不是?false, Jade 會(huì)編譯時(shí)會(huì)把函數(shù)里加上?__.lineno = n;, 這個(gè)參數(shù)會(huì)在編譯出錯(cuò)時(shí)傳遞給?rethrow(), 而這個(gè)函數(shù)會(huì)在 Jade 初始輸出時(shí)給出一個(gè)有用的錯(cuò)誤信息。
function anonymous(locals) { var __ = { lineno: 1, input: "- var title = 'yay'\nh1.title #{title}\np Just an example", filename: "testing/test.js" }; var rethrow = jade.rethrow; try { var attrs = jade.attrs, escape = jade.escape; var buf = []; with (locals || {}) { var interp; __.lineno = 1; var title = 'yay' __.lineno = 2; buf.push('<h1'); buf.push(attrs({ "class": ('title') })); buf.push('>'); buf.push('' + escape((interp = title) == null ? '' : interp) + ''); buf.push('</h1>'); __.lineno = 3; buf.push('<p>'); buf.push('Just an example'); buf.push('</p>'); } return buf.join(""); } catch (err) { rethrow(err, __.input, __.filename, __.lineno); } }當(dāng)?compileDebug?參數(shù)是?false, 這個(gè)參數(shù)會(huì)被去掉，這樣對(duì)于輕量級(jí)的瀏覽器端模板是非常有用的。結(jié)合 Jade 的參數(shù)和當(dāng)前源碼庫(kù)里的?./runtime.js?文件，你可以通過(guò)?toString()?來(lái)編譯模板而不需要在瀏覽器端運(yùn)行整個(gè) Jade 庫(kù)，這樣可以提高性能，也可以減少載入的 JavaScript 數(shù)量。
function anonymous(locals) { var attrs = jade.attrs, escape = jade.escape; var buf = []; with (locals || {}) { var interp; var title = 'yay' buf.push('<h1'); buf.push(attrs({ "class": ('title') })); buf.push('>'); buf.push('' + escape((interp = title) == null ? '' : interp) + ''); buf.push('</h1>'); buf.push('<p>'); buf.push('Just an example'); buf.push('</p>'); } return buf.join(""); }Makefile 的一個(gè)例子
通過(guò)執(zhí)行?make， 下面的 Makefile 例子可以把?pages/*.jade?編譯為?pages/*.html?。
JADE = $(shell find pages/*.jade) HTML = $(JADE:.jade=.html)all: $(HTML)%.html: %.jade jade < $< --path $< > $@ clean: rm -f $(HTML)這個(gè)可以和?watch(1)?命令起來(lái)產(chǎn)生像下面的行為：
命令行的 Jade
使用: jade [options] [dir|file ...]選項(xiàng):-h, --help 輸出幫助信息-v, --version 輸出版本號(hào)-o, --out <dir> 輸出編譯后的 HTML 到 <dir>-O, --obj <str> JavaScript 選項(xiàng)-p, --path <path> 在處理 stdio 時(shí)，查找包含文件時(shí)的查找路徑-P, --pretty 格式化 HTML 輸出-c, --client 編譯瀏覽器端可用的 runtime.js-D, --no-debug 關(guān)閉編譯的調(diào)試選項(xiàng)(函數(shù)會(huì)更小)-w, --watch 監(jiān)視文件改變自動(dòng)刷新編譯結(jié)果Examples:
注意: 從?v0.31.0?的?-o?選項(xiàng)已經(jīng)指向?--out,?-O?相應(yīng)做了交換
教程
- cssdeck interactive?Jade syntax tutorial
- cssdeck interactive?Jade logic tutorial
許可
Jade使用MIT許可證。
項(xiàng)目主頁(yè)
jade-lang.com
轉(zhuǎn)載于:https://www.cnblogs.com/zhangycun/p/10304209.html
總結(jié)
以上是生活随笔為你收集整理的Jade —— 源于 Node.js 的 HTML 模板引擎的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： idou老师教你学Istio06: 如何
- 下一篇： 大厂高级前端面试题答案