实时监控
 
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']);
 
 

jade 学习笔记 - gulp 自动编译的更多相关文章

  1. thinkphp学习笔记9—自动加载

    原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\ ...

  2. thinkphp学习笔记3—项目编译和调试模式

    原文:thinkphp学习笔记3-项目编译和调试模式 1.项目编译 在章节2.4项目编译中作者讲到使用thinkphp的项目在第一次运行的时候会吧核心需要加载的文件去掉空白和注释合并到一个文件中编译并 ...

  3. Jade学习笔记

    初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习. jade是基于缩进的,所以tab与space不能混用: 属性的设置: ...

  4. 学习笔记：自己编译安装OpenCV+测试opencv安装是否成功

    1. 安装编译依赖的软件包 # 安装读写不同图片类型的库: sudo apt-get install libjpeg8-dev libtiff4-dev libjasper-dev libpng12- ...

  5. pug(jade) 学习笔记

    from: https://www.cnblogs.com/xiaohuochai/p/7222227.html 对于一些嵌套层次较深的页面,在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的 ...

  6. Vue.js 学习笔记之五：编译 vue 组件

    正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...

  7. Spring 4.0.2 学习笔记(2) - 自动注入及properties文件的使用

    接上一篇继续, 学习了基本的注入使用后,可能有人会跟我一样觉得有点不爽,Programmer的每个Field,至少要有一个setter,这样spring配置文件中才能用<property> ...

  8. 《 C#语言学习笔记》——自动属性

    属性是访问对象状态的首选方式,因为它们禁止外部代码实现对象内部的数据存储机制.属性还对内部数据的访问方式有了更多控制.一般以非常标准的方式定义属性,即通过一个公共属性直接访问一个私有成员. 利用自动属 ...

  9. Activiti工作流学习笔记(三)——自动生成28张数据库表的底层原理分析

    原创/朱季谦 我接触工作流引擎Activiti已有两年之久,但一直都只限于熟悉其各类API的使用,对底层的实现,则存在较大的盲区. Activiti这个开源框架在设计上,其实存在不少值得学习和思考的地 ...

随机推荐

  1. ios手机通过fiddler抓去Https协议包时证书问题

    解决Fiddler无法抓取ios端HTTPS请求的问题 南天E心 关注 2018.01.15 10:36 字数 281 阅读 909评论 0喜欢 0 近日公司服务升级,将所有的接口请求由HTTP升级为 ...

  2. C++简单程序设计

    计算机的最基本功能是数据处理 l  C++支持的基本数据类型: n  整数.实数.字符.布尔数据 l  C++支持的基本运算 n  算术运算.关系运算.逻辑运算.位运算.逗号运算.条件运算 程序要能够 ...

  3. JVM系列一：JVM内存模型

    今天起开始总结JVM.自己也看了好多JVM相关的知识,在此做个总结. 打算分为五个部分来讲:JVM内存模型.JVM类加载机制.JVM垃圾回收机制.JVM启动参数设置及优化.JVM其他相关. 今天首先来 ...

  4. DM7经常使用的命令汇总

    由于DM7兼容oracle ,所以当你不知道某个命令时,大抵就是可以参照oracle的命令及语法,当然有极少的情况会不一样.常用命令如下: 1.连接登录 disql SYSDBA/SYSDBA@223 ...

  5. oracle初级系列教程

    https://www.cnblogs.com/linjiqin/category/349944.html

  6. 定制的print()输出格式

    #定制print时的显示内容 #烤地瓜案例:主要显示格式digua("cd1","cd2","cd3""),而不是就直接在一个列表 ...

  7. SpringBoot 配置提示功能

    目的 配置自动提示的辅助功能可以让配置写起来更快,准确率大大提高. springboot jar 包含提供所有支持的配置属性细节的元数据文件.文件的目的是为了让 IDE 开发者在用户使用 applic ...

  8. Java 获取前一天的24小时

    //获取凌晨时间 public static Date getTodayStartTime(){ Calendar todayEnd = Calendar.getInstance(); todayEn ...

  9. Log4j slf4j 配置简单介绍

    Log4j slf4j 配置简单介绍 先借鉴一篇很好的文章 为什么要使用SLF4J而不是Log4J import org.slf4j.Logger; import org.slf4j.LoggerFa ...

  10. snaic和tornado的简单性能测试

    操作系统 : CentOS7.3.1611_x64 Python 版本 : 3.6.8 tornado版本:6.0.2 snaic版本:19.9.0 CPU : Intel(R) Core(TM) i ...