php配合jade使用,前端自动化系列(四)之jade预编译html

刚开始写这篇文章的时候；

其实我是拒绝的；

因为在 前端自动化系列(二)之less、scss、sass、stylus css预处理器 中；

我已经表明了我的态度；

我是不喜欢那种靠缩进来体现等级层次感的语法；

但是考虑到css、js都有了现代化的写法；

单单把html落下不好；或者有童鞋喜欢呢？

毕竟jade还是有一大堆的追随者的；

于是；我还是决定讲一下 Jade ；

老规矩；先安装；cnpm install -g jade

然后创建 test.jade 文件；输入如下内容；doctype html

html

head

meta(charset="UTF-8")

title 白俊遥博客

body

h2 这里是白俊遥的博客

a#blog.blog(href="http://baijunyao.com") 点击go

script.

function test() {

alert(1);

}

test();

命令行运行：jade test.jade -P

生成 test.html 文件；内容如下：

白俊遥博客

这里是白俊遥的博客

点击go

function test() {

alert(1);

}

test();

好了；又是一个看一眼就学会了的东西；

那接着写点稍微高级点的用法；

include test2.jade

include 都有了；那定义变量 、循环呢？- var data = ['白俊遥', '帅白'];

ul

each val, index in data

li= index + ': ' + val

生成：

• 0: 白俊遥
• 1: 帅白

那 extends 、 if 、else 等等自然一个都不能少；

好了；介绍到这；有兴趣的；官网在这： https://pugjs.org