剛開始寫這篇文章的時候；

其實我是拒絕的；

因為在 前端自動化系列(二)之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

總結

以上是生活随笔為你收集整理的php配合jade使用,前端自动化系列(四)之jade预编译html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。