pug學習 - JavaShuo

pug學習

jade(pug)
因爲商標版權問題，jade已經更名爲Pug。
Pug 是一個高性能的模板引擎，它是用 JavaScript 實現的，而且能夠供 Node 使用,固然還支持其餘語言。html

文件後綴名爲.pug(.jade)html5

pug優勢

可讀性高
靈活的縮進
塊展開
代碼默認通過編碼處理(轉義),安全性高
運行時和編譯時上下文錯誤報告
支持命令行編譯
支持html5模式
在內存中緩存(可選)
原生支持 Express
合併動態和靜態標籤類
過濾器

安裝

npm安裝建議安裝個nrm來進行源管理npm

npm install pug -g
npm install pug-cli -g

測試demo

爲了方便編寫代碼,最好把編譯器的tab設置:2.緩存

// index.jade

doctype html
html
  head
    title jade test
  body
    h2 jade study

粗暴的編譯方法安全

// index.html
<!DOCTYPE html><html><head><title>jade test</title></head><body><h2>jade study    </h2></body></html>

發現編譯後的代碼不具有可讀性工具

pug -- help
 Options:
     -P, --pretty           compile pretty HTML output ## 輸出漂亮結構的HTML
    -D, --no-debug         compile without debugging (smaller functions) ## 不帶調試的編譯
    -w, --watch            watch files for changes and automatically re-render ## 對某個文件的變更保持監控
    -E, --extension <ext>  specify the output file extension ## 指定輸出文件擴展名
    -s, --silent           do not output logs ## 不輸出日誌
// 從新編譯
pug -P index.jade
<!DOCTYPE html>
<html>
  <head>
    <title>jade test</title>
  </head>
  <body>
    <h2>jade study    </h2>
  </body>
</html>

自動編譯
只是爲了學習,這裏只要設置-w -P .開發中經過打包工具來進行自動編譯.性能

pug pug -o . -w -P