写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p> jade安装成功后,进入node命令使用. 2.jade.compile:编译字符窜 > var jade = require('jade') undefined > jade.compile('p hello jade!')() '<p>hello jade!</p&…

摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. html : Emmet,jade,haml,slim http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html 二. css : less,sass,stylus http://www.zhihu.com/question/2030038…

一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs for People First, Computers Second)".虽然这是针对代码可读性来谈及的,但这间接昭示了开发效率之重要不是?此次以 Vue , Es6, Jade, Scss , Webpack, Gulp等一套强大组合来改善团队前端工作流,首因即出于这个理念. 微注:如此处排版不尽…

在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 转载自http://www.lellansin.com/jade-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8.html 在 Express 中调用 jade 模板引擎 1 2 3 4 5 6 7 8 9 1…

最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit"></i> 编译 </span> 在jade里面只需要写一句话就好了 span: i.icon-edit 编译 但我觉得最好用的还是mixins block 如果要定义一个重复利用的模块,就像是微博首页里显示的博文 这里就是重复实现的模块,在jade里可以这样写 mixin blog(bl…

用Jade模板引擎写html确实方便,元素不用闭合,很多种简写的方法. 为了要知道自己写的对不对,就要用到jade -w命令监控jade文件,只要变化就编译. 现在用webstorm写代码的超多,可以通过其中的Filewatcher的方式关联jade命令做到自动化编译生成html文件. 步骤: 1.当然是安装jade,装过的就忽略. npm install -g jade 2.设置Webstorm,添加filewatcher for jade 点击菜单项“File->Settings...”,在…

1.下载 Package Control.sublime-package 文件放入Packages文件目录下 2.control + shift + p   输入install package 3. 跳出弹框后输入jade 安装后重启sublime就高亮显示了 4.如果软件底部一直在加载,那么你需要一个vpn代理,因为被墙了.…

jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index.jade       导出一个 index.html 没有压缩的 jade -P -w index.jade     -w  对文件实时编译 特殊的div .container    p 巧巧    a(href='http://baidu.com', title='巧莉', data-uid='1…

最近在看<Node.js开发指南>,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了, 书上命令为: express -t ejs microblog 可是执行后,仍旧创建的是jade项目. 原来,express3.x,express4.x中创建ejs命令更新为: express -e microblog //即ejs,-j(即jade)  当然,最直接的,你也可以修改package.json里的定义来实现安装ejs. PS:建立工程过程 1.必须得安装express框架…

网址:http://www.html2jade.org/ 刚到一家新的公司 ,上一个前段PHP写的代码基本都是jade写的,看的一脸懵逼,第一次遇到jade代码,并且我一直用的是atom开发工具,安装了一大堆插件转化工具完全完全没有效果.听说webstorm有转化的插件,不过那个重型的开发工具没怎么用过.还是在线翻译比较简单, 好了,方法很简单,辅助jade代码,粘贴到右边,左边自动生成html代码,并且是动态的 哦了.2016-12-08…

安装步骤 一.首先可跟着这个网址安装http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html,路径可由自己定. 二.同时参考http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html 三.以上两个链接的参考见下 1.安装nodejs,比如安装在E:\program files\nodejs(这是本人的安装路径). 确保有两个环境变量 用户环境变量:C:\Users…

Plain Text jade提供了3种得到纯文本的方法. Piped Text 添加纯文本的一个最简单的方法就是在文本最前面加|符号即可. jade: p | It must always be on its own <strong>line</strong> Inline in a Tag 还有一种简单的方法:内嵌在一个标签后即可. jade: p Plain text can include <strong>html</strong> Block in…

之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新的开始吧. 1.首先下载webstorm,百度一下,有绿色版. 2.下载express模块和jade模块,就不详细说了.然后新建一个项目,选择nodejs express app 然后点击创建即可,一个可以运行的小栗子就诞生了. 接下来就看看express和jade是怎么相爱的吧. var expr…

目录: Attributes Boolean Attributes Style Attributes Class Attributes &Attributes Attributes jade中的属性和html中的属性并没有什么太大区别, 值也和js的规则没有什么两样. 1. js表达式 jade: - var authenticated = true a(class=authenticated ? 'authed' : 'anon') html: <a class="authed&…

(-｡-;), 周末过得真是快啊,  很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, nodeJS这东东就是轻量级, 哪里不爽点哪里. 如果你学着写完可以学到: express新建项目 express自带的jade模板引擎的使用 express的路由管理 express中的权限管理 express如何与mongoose结合, 以及mongoose中的schema和model的使用方法,…

为了复习一下nodeJS, 而且socketIO这东西听起来就好高端有木有, 而且有人写过了open, 也可以作为自己的参考有木有, 点击下载源代码: express是4.x的版本, 跟以前的配置有些区别, 我才不管呢, 好用就好>﹏<; 按照正常的流程通过 node install 安装项目依赖, 项目的依赖如下; "dependencies": { "body-parser": "~1.8.4", "cookie-par…

原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, 但是仅凭Hello, World! 是找不到工作的, 因此有了这篇教程. PART I – 安装开发环境 作者是在Windows 8上开发的. STEP 1 – 安装NODE.JS 打开 Node.js website 点击绿色的安装按钮. 运行安装程序就安装好了, 就是这么简单. 现在你已经安装…

前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安装express和jade: npm install express npm install jade 简单介绍本篇使用的api 1 为了使用jade,先要设置express默认的模板引擎,用法如下: app.set('view engine', 'jade');//设置默认的模板引擎 2 如果要进…

模版继承 ; block,extends ;如果是原生html文件的话,后缀html //layout.jade doctype html html head meat(charset='utf-8') title learn jade body block content //inde.jade extends layout //这里注意路径 block content ----- <!DOCTYPE html> <html> <head> <meat char…

编写 简单例子 doctype html html head title learn jade body h1 learn jade 常用命令 编译: jade index.jade //默认编译成压缩后的html文件 排版编译: jade -P index.jade 实时检测: jade -w index.jade / `jade -P -w index.jade 声明文档: jade html, jade strict, jade frameset, jade xml 格式: 子级缩进两格,…

背景:项目在执行gulp命令构建的时候报了jade错误,错误位置指向的是一个空白行,而这个空白行的上下文都是一些注释,错误信息显示unexpected token "pipeless-text". 当时看到这个错误一头雾水,一个空白行怎么会导致错误?错误信息中提到的"pipeless-text"根本不存在啊. 后来直接删除该空白行,问题居然解决了,然而却不懂是怎么回事. 直到看见一篇关于jade的介绍文章 Jade的使用 ,文中的这段话解释了原因. Jade 和 p…

Sublime.WebStorm (PhpStorm) 是前端开发者的得力工具,开发 Jade 也不例外. 在配置这些软件的 Jade 开发环境前,请先在系统中安装 Node.js 和 Jade : 安装 Node.js,装好后重启电脑 安装 Jade Windows:cmd中运行 npm install jade --global Mac:运行 sudo npm install jade --global 配置 Sublime : 安装 Sublime Package Control,如果已经…

nodejs+express经常会看到使用jade视图引擎,但是有些人想要访问普通的html页面,这也是可以的: var express = require('express'); var port = process.env.port||3000; var app = new express(); app.set('views','./views'); app.set('view engine','jade'); app.use(express.static('./public')); app…

Mixin mixin允许我们对某一个块的重复使用,类似于函数. 用法:首先声明mixin,然后使用(在mixin名字之前加+即可以使用)即可. 最简单的mixin jade: //- 声明 mixin list ul li foo li bar li baz //- 使用 +list +list html: <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> &…

Interpolation jade为不同的需求提供了一些特殊的操作符.详见Github = 将右边的值赋予左边,或者替换为右边变量的值. //- 赋值,js格式即可. - var title = "On Dogs: Man's Best Friend"; //- 替换,注意左边无空格右边需有空格. h= title #{val}将引用处替换为val变量的值. - var author = "Tom"; //- 编译生成的html中为Tom,而不是#{author}…

Template inheritance jade支持通过关键字block和extends来实现模板继承. 比如,在layout.jade写上如下代码 html head title My Site - #{title} block scripts script(src='/jquery.js') body block content p Nothing block foot #footer p some footer content 中间的block content代表块,content表示块…

Includes jade允许利用include将其他文件(支持filters所支持的类型)中的代码嵌入当前代码中. jade: //- index.jade doctype html html include ./includes/head.jade body h1 My Site p Welcome to my super lame site. include ./includes/foot.jade //- includes/head.jade head title My Site scr…

Filters jade允许将其他语言嵌套到jade语言之中. 支持的有:coffee-script,:babel,:uglify-js, :less,:markdown-it. jade: :markdown # Markdown I often like including markdown documents. script :coffee-script console.log 'This is coffee script' html: <h1>Markdown</h1> &…

Extends jade允许多个jade文件继承一个jade文件. jade: //- layout.jade doctype html html head block title title Default title body block content //- index.jade extends ./layout.jade block title title Article Title block content h1 My Article html: 生成的index.html中 <!…

Case jade中的case类似js中的switch语句. 当前一个when中无语句的时候,将一直往下直至遇到一个有语句的when才跳出. jade: - var friends = 10 case friends when -1 //- 执行when 1中的语句 when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends html: <p>you have 10…