學習前端模板引擎 jade 一

通常大部分前端開發工作者一開始步入前端開發的時候，都是直接簡單的寫html頁面然後丟給後台開發，後台開發在來嵌入模版。

對於日益龐大的前端頁面來說，還是用老的字串拼接的方法來嵌入html內容已經不適應當下的開發趨勢了。

廢話不多說，直接切入正題。

第二步我要安裝npm包管理工具，在node環境下，不裝grunt是無法開展工作的喲。

開始安裝jade外掛程式了，下面的就是安裝命令。

首先我們建立乙個資料夾叫jade,然後在建立乙個jade的檔案叫jade.jade即可。

2.我們在jade檔案內寫上jade規模的模版**，其實很好看懂。

3.上面**估計大家都能看懂，就是建立乙個常規的前端html的檔案，但是規範是jade的規範，然後我們可以進入cmd命令列工具 cd到當前的資料夾，然後暴力編譯當前的jade檔案，會看到同目錄會生成乙個壓縮過的html的檔案。

4.壓縮的過的可以通過加-p來不壓縮，如果每次更改模版都要打命令列一次很麻煩是不是，我們可以通過加上jade -p -w jade.jade 加上乙個-w來開啟監視模式，每次更改模版,html檔案都會自動編譯咯。

5.我們現在來看看生成的html檔案吧，是不是生成了正常的html dom樹了呢？

從圖上可以看出來，子級元素必須要縮排。

標籤和文字必須要留有空行。