实时监控
 
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. 算法学习之剑指offer（七）

    题目1 题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P% ...

  2. Java总结---继承（不断完善ing..）

    java三大特性:封装.继承.多态 继承 一.目的:实现代码的复用 二.简单例子(A继承了C): public class A extends C { //检测哪些可以在子类里使用 public vo ...

  3. Ubuntu 安装中文

    系统环境:

  4. PHP 插入排序 -- 折半查找

    1. 折半查找  -- Binary Insertion Sort 时间复杂度 : O(n^2) 适用条件 : 相对直接插入排序,减少了数值的比较次数.适用于需要排序的数码比较少的情况. <?p ...

  5. httprunner-1-linux下搭建hrun（上）

    前言 相信不少小伙伴对开源项目 httprunner 都很感兴趣,我们来看下它的有哪些特点吧: 项目管理:新增项目.列表展示及相关操作,支持用例批量上传(标准化的HttpRunner json和yam ...

  6. Rancher与ARM深化战略合作，“软硬结合”加速边缘计算时代

    时至今日,许多企业已将边缘计算列为战略目标,对于部分企业而言,边缘计算则已成为它们势在必行的部分.而随着对应用软件和硬件能力的需求不断增长,容器和Kubernetes已发展为边缘计算领域备受瞩目的一项 ...

  7. C# 表达式树 Expression

    表达式树是定义代码的数据结构. 它们基于编译器用于分析代码和生成已编译输出的相同结构. 几种常见的表达式 BinaryExpression 包含二元运算符的表达式 BinaryExpression b ...

  8. Navicate12激活教程(完整详细版)

    写在前面 最近身边的小伙伴苦于没有Navicat12的激活工具,不能使用最新版的Navicat,鉴于此,遂将自己整理的文章贴出来,供大家参考,不过个人还是主张维护正版的意愿,如果经济实力允许的话,还是 ...

  9. docker-compose下的java应用启动顺序两部曲之二：实战

    上篇回顾 本文是<docker-compose下的java应用启动顺序两部曲>的终篇,在上一篇<docker-compose下的java应用启动顺序两部曲之一:问题分析>中,我 ...

  10. springboot---发送邮件

    1.pom.xml配置 <dependencies> <dependency> <groupId>org.springframework.boot</grou ...