实时监控
 
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. 2018 php 面试

    排序算法 快速排序 快速排序是十分常用的高效率的算法,其思想是:先选一个标尺,用它把整个队列过一遍筛选,以保证左边的元素都不大于它,其右边都不小于它 function quickSort($arr){ ...

  2. django-drf框架中排序和查询组件

    0910自我总结 django-drf框架中排序和查询组件 一查询相关 1.模糊查询 1.导入模块组件 from rest_framework.filters import SearchFilter ...

  3. Flask中的数据连接池

    pymsql链接数据库 import pymysql conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd=' ...

  4. PHP range

    1.函数的作用:生成范围内的数据 2.函数的参数: @param mixed $start @param mixed $end @param mixed $step 3.例子: <?php $n ...

  5. PMP 德尔菲技术

    1.德尔菲技术,必须遵守以下几个规则: 每个专家只与主持人单线联系. 专家之间完全背靠背,更不能进行讨论.为保证专家提出独立见解,甚至需要把专家分散在不同的物理地点. 专家以匿名的书面形式提出意见. ...

  6. Spring事务传播属性有那么难理解吗？

    学习东西要知行合一,如果只是知道理论而没实践过,那么掌握的也不会特别扎实,估计过几天就会忘记,接下来我们一起实践来学习Spring事务的传播属性. 传播属性 传播属性定义的是当一个事务方法碰到另一个事 ...

  7. JAVA netty 简单使用

    实现一个功能,客户端和服务器 轮流对一个数加+1 服务器 public class Server { public static void main(String[] args) { NioEvent ...

  8. 处理 Could not find a 'KafkaClient' entry in the JAAS configuration. System property 'java.security.auth.login.config' is

    场景 某监控进程需要访问多个集群的Kafka INFO - org.apache.kafka.common.KafkaException: Failed to construct kafka cons ...

  9. 设计模式（十五）Facade模式

    Facade模式可以为相互关联在一起的错综复杂的类整理出高层接口,可以让系统对外只有一个简单的接口,而且还会考虑到系统内部各个类之间的责任关系和依赖关系,按照正常的顺序调用各个类. 还是先看一下示例程 ...

  10. UE4蓝图与C++交互——射击游戏中多武器系统的实现

    回顾   学习UE4已有近2周的时间,跟着数天学院"UE4游戏开发"课程的学习,已经完成了UE4蓝图方面比较基础性的学习.通过UE4蓝图的开发,我实现了类似CS的单人版射击游戏,效 ...