jade 学习笔记 - gulp 自动编译
2015-07-12 11:17
471 查看
实时监控
jade -P -w .\test1.jade
sublime 分栏,可以看到实时修改情况
1. 元素写法
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()}
3. 定义代码片段 及 遍历
4. 利用 gulp 编译 jade
gulpfile.js 可以自动编译新增 jade 文件
来自为知笔记(Wiz)
jade -P -w .\test1.jade
sublime 分栏,可以看到实时修改情况
1. 元素写法
doctype html <!--[if IE8]><html class='ie8'><![endif]--> <!--[if IE9]><html class='ie9'><![endif]--> <!--[if !IE]><!--> html <!--<![endif]--> head meta(http-equiv='Content-Type', content='text/html', charset='UTF-8') title jade study body style. body{color:#ff6600} script. var imoocCourse = 'jade' h2 文档声明和头尾标签 h2 标签语法 section div ul p h2 元素属性 div#id.class1.class2 aa a(href='http://imooc.com') h2 注释 h3 单行注释 // h3.title(id='title') h3 非缓存注释 //- #id.classname h3 块注释 //- p a(href='http://imooc.com') h3.title(id='title',class='title3') imooc a(href='http://imooc.com', title='imooc jade study', data-uid='1000') link input(name='course',type='text',value='jade') input(name='type',type='checkbox',checked) h3 混排的大段文本 p | 1. aa strong 11 | 2. bb | 3. cc | 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()}
doctype html html head meta(charset='utf-8') title #{course.toUpperCase()} study body h2 转义、 - var data = 'text' - var htmlData = '<script>alert(1)</script><span>script</span>' p #{data} p 安全转义 #{htmlData} p 非转义 !{htmlData} p= data p= htmlData p!= htmlData p \#{htmlData} p \!{htmlData} input(value=newData) input(value=data) h2 声明变量和替换数据
3. 定义代码片段 及 遍历
doctype html html head meta(charset='utf-8') title 测试定义代码块 body h2 流程 h3 for each 遍历对象 - var imooc = {course:'jade',level:'high'} - for (var k in imooc) p= imooc[k] - each value,key in imooc p #{key}: #{value} h3 遍历数组 - var courses = ['node','jade','express'] - each item in courses p= item h3 嵌套循环 - var sections = [{id:1,items:['a','b']},{id:2,items:['c','d']}] dl each section in sections dt= section.id each item in section.items dd= item
4. 利用 gulp 编译 jade
gulpfile.js 可以自动编译新增 jade 文件
var gulp = require('gulp'), jade = require('gulp-jade'); gulp.task('jade', function() { return gulp.src('**/*.jade') .pipe(jade()) .pipe(gulp.dest('./')); }); gulp.task('watch', function() { gulp.watch('**/*.jade', ['jade']); }); // gulp.task('watch', function() { // gulp.watch('./**/*.jade', function(e) { // var p = e.path.replace(__dirname, '') // .replace(/\/[^\/]+?\.jade$/, '/'); // gulp.src(e.path) // .pipe(jade()) // .pipe(gulp.dest('.' + p)); // }); // }); gulp.task('default', ['watch']);
来自为知笔记(Wiz)
相关文章推荐
- JAVA集合类详解
- LeetCode || Implement Queue using Stacks
- The Unix Tools Are Your Friends
- .net使用FluentValidation进行服务端验证。
- HAL打开驱动失败
- 21-Tomcat不编译项目
- C++11并发之std::mutex
- Ubuntu Coding for Your Friends
- 欢迎使用CSDN-markdown编辑器
- 10003 - Cutting Sticks(DP)
- 类中static并没有那么简单
- iOS UIImageView 圆角
- Two Wrongs Can Make a Right (and Are Difficult to Fix)
- 浅析软件开发的3个层次
- Android中加载的图片自动适应屏幕(新手)
- 微信PC版为什么这么设计?
- Android Fragment的标准写法
- 牛人整理分享的面试知识:操作系统、计算机网络、设计模式、Linux编程,数据结构总结
- 指针和内存分配一个最基本理解
- Android实习02:"摇一摇"功能的实现