gulp-jade运用

Veröffentlicht am   |  

Jade介绍

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

gulp-jade的安装

1.先建立一个jade文件夹，然后再终端初始化npm init生成package.json文件
2.在nodeJs中输入以下命令npm install gulp-jade –save-dev下载gulp-jade

gulp-jade运行

在jade文件夹下新建一个test.jade的文件，在此文件下写入一些内容；

示例如下：

doctype
html
    head
    meta(charset="utf-8")
    title
body
div 我是div
include a.jade
h2#heihei.haha.hhehe hello
    span 10029
    | world
em 我是em
.qiaqia(style="color:red;font-size:18px;") 你好jade

在jade建个gulpfile.js文件，并写入以下内容使其能正确转义 

 gulp.task('jade',function(){
 gulp.src("jade/jade.jade") //获取jade文件夹下的所有的jade文件
 .pipe(jade()) //将所有的jade文件分别转换成标准的html格式
 .pipe(gulp.dest('jade')) //设置输出文件存储位置
})
    gulp.task('default',['jade'])

在终端执行gulp，完成转换。
转换后压缩代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body></body><div>我是div</div><span></span><div>我是div<p>我时间额</p></div><h2 id="heihei" class="haha hhehe">hello<span>10029</span>world</h2><em>我是em</em><div style="color:red;font-size:18px;" class="qiaqia">你好jade</div></html>

jade语法使用小技巧

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注释。