gulp-jade

前言：

Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。
他是基于NodeJs的。本文主要讲解使用jade转换成html文件以及相关语法

在线工具：

地址一

地址二

jade的特性

  • 客户端支持
  • 高可读性
  • 灵活缩进
  • html 5模式
  • 可选内存缓冲
  • 默认代码转义以提高安全性
  • 以过滤器产生解析树
  • 模板继承
  • 开箱即用的Express JS支持
  • 命令行运行编译jade模板
  • 通过each透明迭代对象，数组，甚至非枚举类
  • 块注释
  • 块扩展
  • 编译和运行时上下文错误报告
  • 属性改写
  • 静态包含
  • mixins
  • 块注释
  • 无标签前缀
  • AST过滤器
  • ……

gulp-jade的安装

guip的安装这里就不在阐述

终端输入：

1
npm install gulp-jade --save-dev

安装好后会在文件夹里的 node_modules 文件夹下多出 gulp-jade 文件夹 此时说明gulp-jade安装完成

gulp-jade的使用

首先在根目录创建 gulpfile.js gulp的所有命令操作都是在gulpfile.js文件里书写的

1
2
3
4
5
6
7
8
9
var gulp=require('gulp');
var jade = require('gulp-jade');


gulp.task('jade', function() {
  	gulp.src('src/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('desk/html/'))
})

命令执行顺序为： 寻找src文件夹下的所有扩展名为jade的文件 执行转换 将转换成html的文件输出到desk文件夹下的html文件夹内。

jade语法

doctype

添加一个doctype只需要doctype，然后再跟一个可选的值，默认是html

1
doctype html

会转换为：

1
<!DOCTYPE html>

标签

以div标签为例

1
div

会转换为

1
<div></div>

jade能自动识别自闭和标签

1
input

会转换为：

1
<input/>

文本

标签中添加文本

1
p 这是P标签

会转换为：

1
<p>这是P标签</p>

标签中嵌套标签 和写html一样就行

1
2
p 这是P标签
	span 这是span标签

会转换为：

1
<p>Welc这是P标签<span>这是span标签</span></p>

属性

以 ()来分割属性

1
a(href="http://www.baidu.com") 百度一下

会转换为：

1
<a href="http://www.baidu.com">百度一下</a>

设置id或class

标签后面跟上 #id , .classname ，如果没有标签则使用默认标签div

1
2
3
#content
p#info
a.btn

会转换为：

1
2
3
<div id="content"></div>
<p id="info"></p>   
<a class="btn"></a>

1个id和多个class

连着写即可

1
a#btn.btn.btn-crr

会转换为：

1
<a id="btn" class="btn btn-crr"></a>

循环

语法结构：

1
each VAL[,KEY] in OBJ

VAL是值
KEY是键，可选
OBJ是对象，array or object

数组实例

1
2
3
 - var jobs = ["baidu", "ali", "tenxun", "heihei"]
each job in jobs
    li= job

会转换为：

1
2
3
4
<li>baidu</li>
<li>ali</li>
<li>tenxun</li>
<li>heihei</li>

对象实例

1
2
3
- var jobs = {"baidu" : "yixia", "shangtianmao" : "jiugoul", "123" : "456"}
each val,key in jobs
    li #{key} : #{val}

会转换为：

1
2
3
<li>baidu : yixia</li>
<li>shangtianmao : jiugoul</li>
<li>123 : 456</li>