CoffeeScriptJade

Jade – 模板引擎

Jade 是二个高品质的模板引擎,它深受
Haml 影响,它是用
JavaScript 达成的, 并且能够供
Node 使用.

翻译: 草依山

声明

从 Jade v0.31.0 早先吐弃了对于 <script><style>
标签的平文本扶助. 那些难点你能够在 <script> <style> 标签后加上 .
来解决.

愿意那点能让 Jade 对新手更和谐, 同时也不影响到 Jade
本身的力量依旧导致过度冗长.

比方你有恢宏的公文必要转移你能够用下
fix-jade
尝试自动落成这么些进度.

Test drive

您能够在网上试玩
Jade
.

README 目录

<a name=”a1″/>

特性

  • 客户端辅助
  • 代码高可读
  • 利落的缩进
  • 块展开
  • Mixins
  • 静态包蕴
  • 性情改写
  • 有惊无险,暗中认可代码是转义的
  • 运转时和编写翻译时上下文错误报告
  • 命令行下编写翻译jade模板
  • HTML5 模式 (使用 `!!! 5` doctype html 文书档案类型)
  • 在内部存款和储蓄器中缓存(可选)
  • 集合动态和静态标签类
  • 能够通过 filters 修改树
  • 模板继承
  • 原生协理 Express
    JS
  • 通过 each 枚举对象、数组甚至是不可能枚举的对象
  • 块注释
  • 不曾前缀的竹签
  • AST Filters
  • 过滤器
  • Emacs
    Mode
  • Vim
    Syntax
  • TextMate
    Bundle
  • Coda/SubEtha syntax
    Mode
  • Screencasts
  • html2jade
    converter

<a name=”a2″/>

别的达成

<a name=”a3″/>

安装

通过 NPM:

npm install jade

<a name=”a4″/>

浏览器援助

把 Jade 编译为叁个可供浏览器选拔的单文件,只须要不难的实践:

$ make jade.js

设若你早已安装了 uglifyjs
(npm install uglify-js),你能够执行上面包车型地铁吩咐它会转变所有的公文。其实每2个行业内部版本里都帮您做了那事。

make jade.min.js

私下认可情况下,为了便于调节和测试Jade会把模出版协会会成带有形如 __.lineno = 3
的行号的样式。
在浏览器里使用的时候,你可以通过传递三个挑选 { compileDebug: false }
来去掉这些。
上面包车型客车模版

p Hello #{name}

会被翻译成下面包车型大巴函数:

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("");
}

因此选择 Jade 的
./runtime.js你能够在浏览器选拔这个预编写翻译的模板而不必要动用 Jade,
你只须要动用 runtime.js 里的工具函数, 它们会放在 jade.attrs,
jade.escape 这些里。 把选项 { client: true } 传递给
jade.compile(), Jade 会把那个帮衬函数的引用位于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("");
}

<a name=”a5″/>

公开 API

var jade = require('jade');

// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);

选项

  • self 使用 self 命名空间来有所当地变量. (默认为 false)
  • locals 本地变量对象
  • filename 十分发生时利用,includes 时必需
  • debug 输出 token 和翻译后的函数体
  • compiler 替换掉 jade 默许的编写翻译器
  • compileDebug false的时候调节和测试的构造不会被输出
  • pretty 为出口加上了非凡的空格缩进 (默认为 false)

<a name=”a6″/>

语法

<a name=”a6-1″/>

行终止标志

CRLFCR 会在编写翻译在此之前被更换为 LF

<a name=”a6-2″/>

标签

标签便是三个回顾的单词:

html

它会被更换为 <html></html>

标签也是能够有 id 的:

div#container

它会被转换为 <div id="container"></div>

怎么加 class 呢?

div.user-details

转换为 <div class="user-details"></div>

三个 class 和 id? 也是足以化解的:

div#foo.bar.baz

转换为 <div id="foo" class="bar baz"></div>

不停的 div div div 很看不惯啊 , 能够那样:

#foo
.bar

那几个好不不难大家的语法糖,它曾经被很好的协助了,上面包车型客车会输出:

<div id="foo"></div><div class="bar"></div>

<a name=”a6-3″/>

标签文本

只须要简单的把内容放在标签之后:

p wahoo!

它会被渲染为 <p>wahoo!</p>.

很帅吗,不过大段的文件如何是好吧:

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go

渲染为 <p>foo bar baz rawr.....</p>

怎么和数量整合起来? 全部品类的公文浮现都足以和数码整合起来,借使大家把
{ name: 'tj', email: 'tj@vision-media.ca' }
传给编写翻译函数,下边是模板上的写法:

#user #{name} <#{email}>

它会被渲染为 <div id="user">tj <tj@vision-media.ca></div>

当就是要出口 #{} 的时候咋做? 转义一下!

p \#{something}

它会输出 <p>#{something}</p>

如出一辙能够选用非转义的变量 !{html}, 上面的模版将一贯出口1个 <script>
标签:

- var html = "<script></script>"
| !{html}

内联标签同样能够应用文本块来含有文本:

label
  | Username:
  input(name='user[name]')

要么直接行使标签文本:

label Username:
  input(name='user[name]')

包蕴文本的标签,比如 <script>, <style>, 和 <textarea>
不须要前缀 | 字符, 比如:

html
  head
    title Example
    script
      if (foo) {
        bar();
      } else {
        baz();
      }

此地还有一种选用,能够接纳 . 来开首一段文本块,比如:

p.
  foo asdf
  asdf
   asdfasdfaf
   asdf
  asd.

会被渲染为:

<p>foo asdf
asdf
  asdfasdfaf
  asdf
asd
.
</p>

这和带一个空格的 . 是不相同的, 带空格的会被 Jade
的解析器忽略,当作二个平日的文字:

p .

渲染为:

<p>.</p>

要求专注的是文本块须求一次转义。比如想要输出上边包车型地铁文件:

<p>foo\bar</p>

使用:

p.
  foo\\bar

<a name=”a6-4″/>

注释

单行注释和 JavaScript 里是一样的,通过 // 来起首,并且必须独立一行:

// just some paragraphs
p foo
p bar

渲染为:

<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>

Jade 同样支撑不出口的注释,加贰个短横线就行了:

//- will not output within markup
p foo
p bar

渲染为:

<p>foo</p>
<p>bar</p>

<a name=”a6-5″/>

块注释

块注释也是支撑的:

body
  //
    #content
      h1 Example

渲染为:

<body>
  <!--
  <div id="content">
    <h1>Example</h1>
  </div>
  -->
</body>

Jade 同样很好的帮衬了准星注释:

body
  //if IE
    a(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>

<a name=”a6-6″/>

内联

Jade 扶助以本来的不二法门定义标签嵌套:

ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz

<a name=”a6-7″/>

块展开

块展开能够扶持你在一行内创立嵌套的价签,上边包车型大巴例子和地点的是一模一样的:

ul
  li.first: a(href='#') foo
  li: a(href='#') bar
  li.last: a(href='#') baz

<a name=”a6-8″/>

Case

case 表明式按上面那样的款式写:

html
  body
    friends = 10
    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends

块展开在那里也得以应用:

friends = 5

html
  body
    case friends
      when 0: p you have no friends
      when 1: p you have a friend
      default: p you have #{friends} friends

<a name=”a6-9″/>

属性

Jade 以往支撑选取 () 作为属性分隔符

a(href='/login', title='View login page') Login

当三个值是 undefined 或者 null 属性 会被添加,
从而啊,它不会编写翻译出 ‘something=”null”‘.

div(something=null)

Boolean 属性也是接济的:

input(type="checkbox", checked)

动用代码的 Boolean 属性只有当属性为 true 时才会输出:

input(type="checkbox", checked=someValue)

多行同样也是可用的:

input(type='checkbox',
  name='agreement',
  checked)

多行的时候能够不加逗号:

input(type='checkbox'
  name='agreement'
  checked)

加点空格,格式雅观一点?同样帮衬

input(
  type='checkbox'
  name='agreement'
  checked)

冒号也是匡助的:

rss(xmlns:atom="atom")

假定自个儿有2个 user 对象 { id: 12, name: 'tobi' }
咱俩期待创立2个指向 /user/12 的链接 href, 我们能够动用普通的
JavaScript 字符串连接,如下:

a(href='/user/' + user.id)= user.name

抑或我们运用 Jade 的修章, 这些自家想许多运用 Ruby 只怕 CoffeeScript
的人会看起来像普通的 JS..:

a(href='/user/#{user.id}')= user.name

class 属性是3个特种的质量,你能够一向传送一个数组,比如
bodyClasses = ['user', 'authenticated'] :

body(class=bodyClasses)

<a name=”a6-10″/>

HTML

内联的 HTML 是能够的,大家得以采取管道定义一段文本 :

html
  body
    | <h1>Title</h1>
    | <p>foo bar baz</p>

抑或大家得以行使 . 来告诉 Jade 大家需求一段文本:

html
  body.
    <h1>Title</h1>
    <p>foo bar baz</p>

上边的五个例子都会渲染成相同的结果:

<html><body><h1>Title</h1>
<p>foo bar baz</p>
</body></html>

那条规则适应于在 Jade 里的任何公文:

html
  body
    h1 User <em>#{name}</em>

<a name=”a6-11″/>

Doctypes

增进文书档案类型只须要简单的使用 !!!, 或者 doctype 跟上上面包车型客车可选项:

!!!

会渲染出 transitional 文书档案类型, 大概:

!!! 5

!!! html

doctype html

Doctype 是深浅写不灵敏的, 所以上边两个是一致的:

doctype Basic
doctype basic

理所当然也是足以一贯传送一段文书档案类型的文件:

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

渲染后:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

会输出 HTML5 文书档案类型. 下边包车型大巴暗中同意的文书档案类型,能够相当粗略的扩大:

var doctypes = exports.doctypes = {
  '5': '<!DOCTYPE html>',
  'xml': '<?xml version="1.0" encoding="utf-8" ?>',
  'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
  'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
  'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
  'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
  '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
  'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
  'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

经过上面包车型地铁代码能够相当粗略的更动私下认可的文书档案类型:

    jade.doctypes.default = 'whatever you want';

<a name=”a7″/>

过滤器

过滤器前缀 :, 比如 :markdown
会把上面块里的公文交给专门的函数实行拍卖。查看顶部 特性
里有啥可用的过滤器。

body
  :markdown
    Woah! 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>

<a name=”a8″/>

代码

Jade 如今帮助两种档次的可实施代码。第二种是前缀 -, 那是不会被输出的:

- var foo = 'bar';

那足以用在标准语句或然循环中:

- for (var key in obj)
  p= obj[key]

由于 Jade 的缓存技术,上边包车型地铁代码也是足以的:

- if (foo)
  ul
    li yay
    li foo
    li worked
- else
  p oh no! didnt work

哈哈哈,甚至是相当长的循环也是能够的:

- if (items.length)
  ul
    - items.forEach(function(item){
      li= item
    - })

据此你想要的!

下一步大家要 转义 输出的代码,比如大家回到八个值,只要前缀二个 =

- var foo = 'bar'
= foo
h1= foo

它会渲染为 bar<h1>bar</h1>. 为了安全起见,使用 =
输出的代码暗许是转义的,假如想直接出口不转义的值能够采纳 !=

p!= aVarContainingMoreHTML

Jade 同样是设计老师和朋友好的,它能够使 JavaScript
更直白更富表现力。比如下边包车型客车赋值语句是相等的,同时表明式依旧一般的
JavaScript:

- var foo = 'foo ' + 'bar'
foo = 'foo ' + 'bar'

Jade 会把 if, else if, else, until, while, unless
同其他优先对待, 不过您得记住它们照旧一般的 JavaScript:

if foo == 'bar'
  ul
    li yay
    li foo
    li worked
else
  p oh no! didnt work  

<a name=”a9″/>

循环

就算已经支撑 JavaScript 原生代码,Jade
还是扶助了有个别杰出的标签,它们能够让模板越发便于通晓,在那之中之一正是
each, 那种样式:

each VAL[, KEY] in OBJ

1个遍历数组的例证 :

- var items = ["one", "two", "three"]
each item in items
  li= item

渲染为:

<li>one</li>
<li>two</li>
<li>three</li>

遍历一个数组同时带上索引:

items = ["one", "two", "three"]
each item, i in items
  li #{item}: #{i}

渲染为:

<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>

遍历多少个数组的键值:

obj = { foo: 'bar' }
each val, key in obj
  li #{key}: #{val}

将会渲染为:<li>foo: bar</li>

Jade 在里面会把这个话语转换来原生的 JavaScript 语句,仿佛使用
users.forEach(function(user){, 词法功能域和嵌套会像在普通的 JavaScript
中一律:

each user in users
  each role in user.roles
    li= role

假设你开心,也能够选用 for

for user in users
  for role in user.roles
    li= role

<a name=”a10″/>

条件语句

Jade 条件语句和动用了(-) 前缀的 JavaScript
语句是如出一辙的,然后它同意你不行使圆括号,这样会看起来对设计师更和谐一点,
再者要在心头记住那个表明式渲染出的是 常规 JavaScript:

for user in users
  if user.role == 'admin'
    p #{user.name} is an admin
  else
    p= user.name

和下部的应用了健康 JavaScript 的代码是至极的:

for user in users
  - if (user.role == 'admin')
    p #{user.name} is an admin
  - else
    p= user.name

Jade 同时帮助 unless, 这和 if (!(expr)) 是等价的:

for user in users
  unless user.isAnonymous
    p
      | Click to view
      a(href='/users/' + user.id)= user.name 

<a name=”a11″/>

模板继承

Jade 扶助通过 blockextends 关键字来完毕模板继承。 二个块正是三个Jade 的 block ,它将在子模板中贯彻,同时是支撑递归的。

Jade 块假如没有内容,Jade 会添加暗中认可内容,上边包车型大巴代码暗许会输出
block scripts, block content, 和 block foot.

html
  head
    h1 My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

近来我们来持续那一个布局,简单创设一个新文件,像上边那样直接使用
extends,给定路径(能够挑选带 .jade 扩大名可能不带).
你能够定义1个只怕越多的块来覆盖父级块内容, 注意到此处的 foot
没有 定义,所以它还会输出父级的 “some footer content”。

extends extend-layout

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  each pet in pets
    include pet

同样能够在三个子块里添加块,就像是下边完结的块 content
里又定义了四个能够被完结的块 sidebarprimary,或然子模板直接实现
content

extends regular-layout

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

<a name=”a12″/>

置于、追加代码块

Jade允许你 替换 (默认)、 前置追加 blocks. 比如,倘诺你指望在
所有 页面包车型地铁头顶都增加暗许的剧本,你能够这么做:

html
  head
    block head
      script(src='/vendor/jquery.js')
      script(src='/vendor/caustic.js')
  body
    block content

今天一经你有一个Javascript游戏的页面,你期望在暗中同意的台本之外添加一些戏耍相关的脚本,你可以直接append上代码块:

extends layout

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')

使用 block appendblock prependblock 是可选的:

extends layout

append head
  script(src='/vendor/three.js')
  script(src='/game.js')

<a name=”a13″/>

包含

Includes 允许你静态包涵一段 Jade, 或然其余存放在单个文件中的东西比如
CSS, HTML 非日常见的事例是富含尾部和页脚。
假如大家有1个下边目录结构的文书夹:

./layout.jade
./includes/
  ./head.jade
  ./tail.jade

下面是 layout.jade 的内容:

html
  include includes/head  
  body
    h1 My Site
    p Welcome to my super amazing site.
    include includes/foot

那多个带有 includes/headincludes/foot 都会读取相对于给
layout.jade 参数filename 的路线的文书,
那是二个相对路径,不用担心Express帮你解决这一个了。Include
会解析那一个文件,并且插入到曾经成形的语法树中,然后渲染为你希望的剧情:

<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>

眼下已经涉嫌,include 能够包罗诸如 HTML 或许 CSS
这样的剧情。给定二个恢宏名后,Jade 不会把那几个文件作为一个 Jade
源代码,并且会把它当做二个一般文书包蕴进来:

html
  head
    //- css and js have simple filters that wrap them in
        <style> and <script> tags, respectively
    include stylesheet.css
    include 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.html

Include 也得以接受块内容,给定的块将会叠加到含有文件 最后 的块里。
举个例证,head.jade 包涵上边包车型大巴内容:

head
  script(src='/jquery.js')

我们得以像下边给include head加上始末, 那里是添加多少个脚本.

html
  include head
    script(src='/foo.js')
    script(src='/bar.js')
  body
    h1 test

在被含有的模板中,你也得以使用yield语句。yield语句允许你分明地方统一标准明include的代码块的放置地方。比如,要是你指望把代码块放在scripts此前,而不是增大在scripts之后:

head
  yield
  script(src='/jquery.js')
  script(src='/jquery.ui.js')

出于被含有的Jade会按字面解析并联合到AST中,词法范围的变量的职能和直接写在同3个文本中的相同。那就象征include能够用作partial的代表,例如,借使大家有三个引用了user变量的user.jade`文件:

h1= user.name
p= user.occupation

继之,当大家迭代users的时候,只需不难地增进include user。因为在循环中user变量已经被定义了,被含有的模版能够访问它。

users = [{ name: 'Tobi', occupation: 'Ferret' }]

each user in users
  .user
    include user

如上代码会变动:

<div class="user">
  <h1>Tobi</h1>
  <p>Ferret</p>
</div>

user.jade引用了user变量,假使我们期待选择七个见仁见智的变量user,那么我们能够直接定义一个新变量user = person,如下所示:

each person in users
  .user
    user = person
    include user

<a name=”a14″/>

Mixins

Mixins 在编写翻译的模版里会被 Jade 转换为一般的 JavaScript 函数。 Mixins
能够还参数,但不是要求的:

mixin list
  ul
    li foo
    li bar
    li baz

应用不带参数的 mixin 看上去卓殊简单,在一个块外:

h2 Groceries
mixin list

Mixins 也能够带叁个依然八个参数,参数正是一般的 JavaScript
表明式,比如上边包车型客车例证:

mixin pets(pets)
  ul.pets
    - each pet in pets
      li= pet

mixin profile(user)
  .user
    h2= user.name
    mixin pets(user.pets)

会输出像上边包车型大巴 HTML:

<div class="user">
  <h2>tj</h2>
  <ul class="pets">
    <li>tobi</li>
    <li>loki</li>
    <li>jane</li>
    <li>manny</li>
  </ul>
</div>

<a name=”a15″/>

发生输出

要是大家有下边包车型客车 Jade 源码:

- var title = 'yay'
h1.title #{title}
p Just an example

compileDebug 选项不是 false, Jade 会编译时会把函数里增进
__.lineno = n;, 这一个参数会在编译出错开上下班时间传递给 rethrow(),
而那么些函数会在 Jade 开始输出时提交二个灵光的错误音信。

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);
  }
}

compileDebug 参数是 false,
这几个参数会被去掉,那样对于轻量级的浏览器端模板是尤其实惠的。结合 Jade
的参数和当下源码Curry的 ./runtime.js 文件,你能够透过 toString()
来编写翻译模板而不须求在浏览器端运转总体 Jade
库,那样能够增强质量,也能够减弱载入的 JavaScript 数量。

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("");
}

<a name=”a16″/>

Makefile 的二个事例

透超过实际施 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)

.PHONY: clean

以此能够和 watch(1) 命令起来发生像上边包车型客车一坐一起:

$ watch make

<a name=”a17″/>

命令行的 Jade

使用: jade [options] [dir|file ...]

选项:

  -h, --help         输出帮助信息
  -v, --version      输出版本号
  -o, --out <dir>    输出编译后的 HTML 到 <dir>
  -O, --obj <str>    JavaScript 选项
  -p, --path <path>  在处理 stdio 时,查找包含文件时的查找路径
  -P, --pretty       格式化 HTML 输出
  -c, --client       编译浏览器端可用的 runtime.js
  -D, --no-debug     关闭编译的调试选项(函数会更小)
  -w, --watch        监视文件改变自动刷新编译结果

Examples:

  # 编译整个目录
  $ jade templates

  # 生成 {foo,bar}.html
  $ jade {foo,bar}.jade

  # 在标准IO下使用jade 
  $ jade < my.jade > my.html

  # 在标准IO下使用jade, 同时指定用于查找包含的文件
  $ jade < my.jade -p my.jade > my.html

  # 在标准IO下使用jade 
  $ echo "h1 Jade!" | jade

  # foo, bar 目录渲染到 /tmp
  $ jade foo bar --out /tmp 

注意: 从 v0.31.0-o 选项已经指向 --out, -O 相应做了置换

<a name=”a18″/>

教程

<a name=”a19″/>

License

(The MIT License)

Copyright (c) 2009-2010 TJ Holowaychuk
tj@vision-media.ca

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
‘Software’), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.