实时监控
 
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. GUI tkinter (Canvas)绘图篇

    from tkinter import * root = Tk()root.title("中国象棋棋盘手绘") can = Canvas(root,width = 400, hei ...

  2. 【Python3爬虫】我爬取了七万条弹幕，看看RNG和SKT打得怎么样

    一.写在前面 直播行业已经火热几年了,几个大平台也有了各自独特的“弹幕文化”,不过现在很多平台直播比赛时的弹幕都基本没法看的,主要是因为网络上的喷子还是挺多的,尤其是在观看比赛的时候,很多弹幕不是喷选 ...

  3. 使用ipython %matplotlib inline

    首先讲讲这句话的作用,matplotlib是最著名的Python图表绘制扩展库,它支持输出多种格式的图形图像,并且可以使用多种GUI界面库交互式地显示图表.使用%matplotlib命令可以将matp ...

  4. ABAP实现Blowfish加密算法

    看到SAP社区中有人问是否存在ABAP实现的Blowfish加密算法,无人回答.于是动手实现了一个blowfish-abap.通过blowfish-abap可以在SAP系统中使用Blowfish对数据 ...

  5. shark恒破解笔记2-绕过自校验

    这集讲的是绕过自校验 主要是通过文件大小的自校验 首先查壳 有壳  可以用esp定律搞定 OD载入  右键od脱裤壳调试进程 可以看到一些信息 包括入口点252F0 修正后地址为252F0 loadP ...

  6. 单调队列与DP

    算是一个总结吧! 先来一个模板: TYVJ 1305 最大子序和 题目描述 输入一个长度为n的整数序列,从中找出一段不超过M的连续子序列,使得整个序列的和最大. 例如 1,-3,5,1,-2,3 当m ...

  7. 【css】CSS设置文字不能被选中

    CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...

  8. Python开发【第七篇】列表

    问题:当我们要用一系列数字的时候,我们需要将数字进行存储,我们就需要找个容器把数字装起来,我们需要用的时候再拿出来.如何将计算机运算的数据存储在一个地方,同时方便 对数据进行 增.删.改.查 列表 列 ...

  9. xpath相关用法及技巧

    本节讲解网页解析神器----XPath lxml下载 xpath基本用法 xpath插件 Xpath及XML路径语言,它是一门在XML文档查找信息的语言. 一:lxml下载以及安装 首先需要解决lxm ...

  10. Java描述设计模式(16)：代理模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 在电商高速发展的今天,快递的数量十分庞大,甚至出现了快递代理行业,简单的说就是快递的主人没有时间收快递,会指定一个 ...