实时监控
 
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. CS231n:Python Numpy教程

    Python 基本数据类型 容器 列表 字典 集合 元组 函数 类 Numpy 数组 访问数组 数据类型 数组计算 广播 SciPy 图像操作 MATLAB文件 点之间的距离 Matplotlib 绘 ...

  2. drf框架中所有视图及用法

    0909自我总结 drf框架中所有视图及用法 一.drf框架中的所有视图类 from django.views import View from rest_framework import views ...

  3. RF页面断言

    title should be(断言title与预期指定的title内容相等): should be equal  (断言某个字符串与预期指定的字符串相等) should not be equal ( ...

  4. 九、Executor框架

    Executor框架 ​ 我们知道线程池就是线程的集合,线程池集中管理线程,以实现线程的重用,降低资源消耗,提高响应速度等.线程用于执行异步任务,单个的线程既是工作单元也是执行机制,从JDK1.5开始 ...

  5. CSS核心问题

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如 ...

  6. Vue 全家桶，深入Vue 的世界

    内容简介: Vue 实例上的属性 Vue 生命周期 Vue 数据绑定 computed 计算属性 watch 监听器 Vue 组件 Vue 组件 extend Vue 组件高级属性 Vue 的rend ...

  7. 3、Struts2的API访问和数据封装

    一.API的访问 在使用Struts2的框架的过程中,发现Struts2和Servlet的API是解耦合的.在实际开发中,经常使用到Servlet的API,比如进行登录,将用户的信息保存到Sessio ...

  8. 详解Java8 Optional类{最全}

    1:Optional 1.1 概述 Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException),提供了一些的方法代替过去的if-else处理逻辑,并与Stre ...

  9. 手绘风格的 JS 图表库：Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

  10. Spring Data - Spring Data JPA 提供的各种Repository接口

    Spring Data Jpa 最近博主越来越懒了,深知这样不行.还是决定努力奋斗,如此一来,就有了一下一波复习 演示代码都基于Spring Boot + Spring Data JPA 传送门: 博 ...