【技術】一個 HTML 模板工具 - Pug
眾所周知，HTML 文檔有其高度的靈活性和極大的自定義空間，所以當我們討論一個頁面的時候，很多時候要同時討論三個層次：HTML 文檔、CSS 樣式表、JavaScript 腳本。這三個層次分別代表著數據、樣式和邏輯。現有的 HTML 文檔是相當臃腫的，需要我們敲入的代碼也是相當多的，而當前端開發者過分專註於 HTML 文檔的編寫，必然會影響到對樣式的處理和對邏輯的實現。
在計算機的世界裡，我們需要高效率，因為時間就是一切！
現如今，各國開發者充分發揮自己的智慧，產生出一大批自動化或者半自動化的前端開發工具，這些工具有的是基於圖形界面（俗稱拖拽式），如 Dreamweaver, Visual Studio 設計面板，有的是基於 Hint （語法提示）的，如 Visual Studio IntelliSense 和 Atom, SublimeText 等一系列編輯器的插件，**無論是哪一種，都是從現有的 HTML 語法出發，所做的工作是一種輔助性的，基於 GUI 的編寫方式有一大缺陷，工程師對生成的代碼的掌控力往往不夠，常常需要對生成代碼進行一定的修改，或是對各個頁面部件的屬性直接修改，這些都是影響效率的。所以很大一部分工程師選擇使用 Atom, SublimeText, VS Code 一類的編輯器來編寫，同時使用語法提示插件來提高效率。
不得不說，我常常也是這樣的，身為一個後端出身的准全棧工程師，需要熟悉並且常用的語言是非常多的：C++, C#, T-SQL, HTML, CSS, JavaScript, Perl, C （註：Perl 語言尚在學習當中，但是其強大的能力和極具挑戰的語法值得各位去研究）（列表沒有出現 Java 是因為筆者尊重但是強烈厭惡這門語言，寫的第一個 Java 程序是在屏幕輸出一句「F**k you Java」，請原諒筆者的任性，在生活當中能不用 Java，必不用 Java）。這麼多的語言需要熟練使用，需要完全記憶其語法本身就是一件有難度的事情，再加上各個語言還有許多框架（C# 所在的.NET 平台有 ADO.NET, Linq, JavaScript 衍生了眾多的前端框架，諸如 jQuery.js, D3.js等等），要想對每個語言每種框架信手拈來難上加難。
相信有許多開發者都意識到了這個問題，而某種程度上，這個問題促成了我們今天的主角 Pug (ex Jade) 的產生。
上圖這隻狗是 Pug 語言的標誌，無獨有偶，Facebook 團隊的包管理工具 Yarn 是指貓喜歡的毛線球，果然「程序猿」都是貓奴狗奴啊。Pug 官方網站 https://pugjs.org, 項目是開源的，可以嘗試研究原理
Pug，也就是去年的 Jade，更名是因為和某公司的產品名稱衝突，但我更喜歡它以前的名字 Jade - 璞玉，多美，多潔白無瑕。廢話不多說，先來看筆者錄製的動圖：
不能不說，Pug 的語法很簡潔，很優雅，和 Jade 這個名字很搭。
同樣是出於簡化開發者勞動這個目的，Pug 走的是一條簡化語法的道路，為原本臃腫的 HTML 標記做了減法。有讀者會認為這無非就是語法糖嘛，有什麼好推崇的？我不爭辯，但是我說一點：語法糖的產生就是因為開發者的需求，至於愛不愛吃這顆糖，蘿蔔白菜，各有所愛。
下面引用 Github 主頁的一段代碼
doctype htmlnhtml(lang="en")n headn title= pageTitlen script(type=text/javascript).n if (foo) bar(1 + 5)n bodyn h1 Pug - node template enginen #container.coln if youAreUsingPugn p You are amazingn elsen p Get on it!n p.n Pug is a terse and simple templating language with an strong focus on performance and powerful features.n
這段代碼生成：
<!DOCTYPE html>n<html lang="en">n <head>n <title>Pug</title>n <script type="text/javascript">n if (foo) bar(1 + 5)n </script>n </head>n <body>n <h1>Pug - node template engine</h1>n <div id="container" class="col">n <p>You are amazing</p>n <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>n </div>n </body>n</html>n
可以說，Pug 取各家之長（如 Emmet），而又獨具特色（使用空格和縮進表達層級關係），實在是用起來爽爽的。
歡迎評論區討論，筆者願意虛心求教！
MSTest0, 這個假期，我們一起學習 Pug，一起學習 TypeScript！
歡迎微信關注 MSTest0
推薦閱讀：