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']);
