学习Jade_html/css_WEB-ITnose

优秀的模板引擎 Jade ，超强可读性，提升开发效率。

为什么需要 Jade ？

减少写代码，提高可读性，提高生活质量。。。

这一层一层的。。。

看 jade 的这个拼接。

Jade 优点：

超强的可读性 灵活的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行的编译支持 HTML5 模式 可选的内存缓存 利用过滤器解析树的处理

后面说的什么鬼其实我也不懂，但是最大优点: 超强的可读性 ， 提升开发效率 。

需要 Node.js 环境， 没有装的可以参考 Mac 上配置 Node.js 环境

安装 Jade

# 通过 npm 安装 jade$ npm install jade -g 

开始使用

创建 index.jade 文件

index.jade

doctype htmlhtml  head    title hanks.xyz  body    p welcome to hanks.xyz 

就是这么简单，下面开始将 jade 文件渲染为 html 文件

$ jade index.jade  rendered index.html$ cat index.html    hanks.xyz   
welcome to hanks.xyz
  % 

可以看到渲染出来的 index.html 文件是经过压缩过的。我们可以加速 -P 参数格式化渲染的 index.html

$ jade -P index.jade 

html:

          hanks.xyz           
welcome to hanks.xyz
     

还可以加上 -w 参数监听 jade 文件的变化，自动渲染刷新 html 文件

$ jade -P -w index.jade 

基本语法

标签

默认，每行开始的 第一个单词 代表一个标签，可以是自定义的标签

jade:

p welcome to hanks.xyzh1 h1 标题h2 h2 标题 

html:

welcome to hanks.xyz
h1 标题
h2 标题
 

使用 缩进 代表标签嵌套关系

jade:

div.title  h1 title2  p  somethingdiv  div    div.info(name="hanks") 

html:

  
title2
  
 something

      
查看更多关于学习Jade_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114570