jade 学习笔记 - gulp 自动编译

实时监控

jade -P -w .\test1.jade

sublime 分栏，可以看到实时修改情况

1. 元素写法

 1 doctype html
 2 <!--[if IE8]><html class='ie8'><![endif]-->
 3 <!--[if IE9]><html class='ie9'><![endif]-->
 4 <!--[if !IE]><!-->
 5 html
 6     <!--<![endif]-->
 7     head
 8         meta(http-equiv='Content-Type', content='text/html', charset='UTF-8')
 9         title  jade study
10     body
11         style.
12             body{color:#ff6600}
13         script.
14             var imoocCourse = 'jade'
15         h2 文档声明和头尾标签
16         h2 标签语法
17         section
18             div
19                 ul
20                 p
21         h2 元素属性
22         div#id.class1.class2 aa
23             a(href='http://imooc.com')
24         h2 注释
25         h3 单行注释
26         // h3.title(id='title')
27         h3 非缓存注释
28         //- #id.classname
29         h3 块注释
30         //-
31             p
32                 a(href='http://imooc.com')
33         h3.title(id='title',class='title3') imooc
34         a(href='http://imooc.com',
35         title='imooc jade study',
36         data-uid='1000') link  
37         input(name='course',type='text',value='jade')
38         input(name='type',type='checkbox',checked)
39         h3 混排的大段文本
40         p
41             | 1. aa
42             strong 11
43             | 2. bb  
44             | 3. cc
45             | 4. dd

2. 传递参数

a. 页面直接定义

- var course = "jade";

b. 编译命令带参数

jade -P -w test2.jade --obj '{"course":"jade"}'

c. 编码带上参数 json 文件

jade -P -w .\test2.jade -O imooc.json

imooc.json

{

"course":"jade3"

}

参数使用

#{course}

#{course.toUpperCase()}

 1 doctype html
 2 html
 3     head   
 4         meta(charset='utf-8')
 5         title #{course.toUpperCase()} study
 6 body
 7     h2 转义、
 8     - var data = 'text'
 9     - var htmlData = '<script>alert(1)</script><span>script</span>'
10     p #{data}
11     p 安全转义 #{htmlData}
12     p 非转义 !{htmlData}
13  
14     p= data
15     p= htmlData
16     p!= htmlData
17     p \#{htmlData}
18     p \!{htmlData}
19  
20     input(value=newData)
21     input(value=data)
22     h2 声明变量和替换数据

3. 定义代码片段及遍历

 1  
 2 doctype html
 3 html
 4     head
 5         meta(charset='utf-8')
 6         title 测试定义代码块
 7     body
 8         h2 流程
 9         h3 for each 遍历对象
10         - var imooc = {course:'jade',level:'high'}
11         - for (var k in imooc)
12             p= imooc[k]
13         - each value,key in imooc
14             p #{key}: #{value}
15         h3 遍历数组
16         - var courses = ['node','jade','express']
17         - each item in courses
18             p= item
19         h3 嵌套循环
20         - var sections = [{id:1,items:['a','b']},{id:2,items:['c','d']}]
21         dl
22             each section in sections
23                 dt= section.id
24                 each item in section.items
25                     dd= item

4. 利用 gulp 编译 jade

gulpfile.js 可以自动编译新增 jade 文件

 1 var gulp = require('gulp'),
 2     jade = require('gulp-jade');
 3  
 4 gulp.task('jade', function() {
 5     return gulp.src('**/*.jade')
 6     .pipe(jade())
 7     .pipe(gulp.dest('./'));
 8 });
 9  
10 gulp.task('watch', function() {
11     gulp.watch('**/*.jade', ['jade']);
12 });
13  
14 // gulp.task('watch', function() {
15 //     gulp.watch('./**/*.jade', function(e) {
16 //         var p = e.path.replace(__dirname, '')
17 //             .replace(/\/[^\/]+?\.jade$/, '/');
18 //         gulp.src(e.path)
19 //             .pipe(jade())
20 //             .pipe(gulp.dest('.' + p));
21 //     });
22 // });
23  
24 gulp.task('default', ['watch']);

来自为知笔记(Wiz)

posted on 2015-07-12 11:17 知识铺阅读(605) 评论(0) 编辑收藏举报