jade的使用(一)

评论 分享

jade是一个基于javascript，可以运行与node与浏览器环境的一个前端模板引擎。

1.jade的安装


1.在项目根目录下依次安装插件: (该插件安装必须在nodeJs以及gulp安装后安装)

1
npm install --save-dev gulp-jade	#安装jade插件


2.在gulpfile.js 的文件添加：

1
2
3
4
5
6
var jade = require('gulp-jade');#调用gulp中的concat插件
gulp.task('gulpjade', function() {
 return gulp.src('jade/*.jade')  #获取jade文件夹下的所有的jade文件
    .pipe(jade())		#将一个个jade文件分别转换成标准的html格式
    .pipe(gulp.dest('New/'));	#设置输出位置并输出文件
});


3.运行 gulp：(默认执行default函数)

1
gulp gulpjade    #执行gulpjade函数将jade文件分别转换成标准的html格式

2.jade的使用


1.jade的基本格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
doctype
html
	head
		title
		meta(charset="UTF-8")
	body
		div.bodyer(style="width:120px;height:120px;background:red")
			span 第二
			    | 第三
		// 注释一
		//-注释二
		//
			注释三
			注释四


转换成HtmL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="UTF-8">
	</head>
	<body>
		<div style="width:120px;height:120px;background:red" class="bodyer">
			<span>第二
			第三</span>
		</div>
		<!-- 注释一-->
		<!--注释三
		    注释四-->
	</body>
</html>

说明


1、在jade中添加标签通过直接添加标签名来实现；
2、对于同一级元素，使用tab使同级元素距边界同距离左对齐，对于父子级元素，使用tab使子级元素水平方向多余父级一个tab位置。不能使用空格来实现距离对齐；
3、添加类名，id名：在元素后直接加类名，id名, div.className 或 div.IdName；
4、添加元素的属性：在元素后直接加（），在（）添加属性 a(href=”#”,title=”链接”)；
5、添加文本内容：(1)通过在文字前面添加竖线符号“|”可让 jade 原样输出内容;(2)在html标签标后面通过空格隔开文本内容。
6、添加文本注释：可以通过双斜杠进行注释，jade有3种注释方式，可以分别对应输出html注释、不输出html注释、块级html注释。
具体效果见上