html2jade 初次見面以及使用

* 這個工具感謝先前在製作 Node.js Taiwan 靜態頁時由 Poying 以及 Caesar 介紹。

要講 html2jade 這個工具之前，我必須先講一下 Jade 是在做什麼的。
html2jade 的 github 連結

Jade 是一個 Node Template Engine ，如果你用過 Express，那麼你或許聽過 ejs，ejs 也是一種 Template Engine，硬要說成中文的話，也可以說是樣板引擎，如果你是寫 PHP 的人，那麼就像 Smarty 之於 PHP 一樣。

你可以想像 Jade 只是把一般的 HTML 轉換成用比較簡單的方式所寫成的樣板，透過 Node 的環境，進行編譯 (編譯成 HTML)，當然還有一些蠻特別的功能，比方說一些基本的樣板能夠有 includes 功能, block, mixin, filter 等等...，不過這都不是我這邊所要表達的事情，若真的要講 Jade，或許到時候再分另外一篇寫也不遲。

目的

幫你把 html 轉成 Jade。之所以介紹 html2jade 這個工具，是因為假如一個專案已經進行中，要把過去已經完成的 HTML 轉換成 Jade 來使用，只要透過這個工具，就可以幫助你直接做把 HTML 轉換成 Jade 的工作，但是對於轉換的結果，只能盡善盡美，不能抱持能夠 100% 轉換的很完整的心情去使用，就像 github 專頁上寫的一樣 『Converts HTML to Jade template. Not perfect but useful enough for non-daily conversions.』，雖然不夠完美但也夠用，至少你不需要一個一個 html 頁面自己手動轉換成 Jade。


安裝

• 環境條件: 目前 html2jade 只支援 OS X 或是 Linux 的平台
• 安裝 html2jade 之前: 注意已安裝 Node 環境以及 NPM
• 安裝指令:

npm install -g html2jade

* 對了...jade 的副檔名是 .jade

不同來源如何轉換成 Jade Template 
在此我只介紹 2 個我常用的方式，其他的方法詳見 github page。



1. 將指定的網址轉換成 jade template

html2jade 來源網址 > 轉換成 jade 的路徑
Example:

html2jade http://www.unisharp.com > unisharp.jade

打開 unisharp.jade 之後就會是轉換後的成果:

doctype html
html(lang='zh-tw')
  head
    meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
    meta(name='keywords', content='網頁設計,網站建置,台北市網頁設計公司,虛擬主機,企業網站架設,網站顧問,虛擬化服務,Linux 架設')
    meta(name='description', content='悠夏爾科技團隊成

2. 轉換當下目錄所有的 html 檔為 jade 檔

Example:
轉換當下目錄所有的 html 檔案

wintekiMacBook-Pro:project-xxxx win$  html2jade *.html

列出所有的 html 以及 jade

wintekiMacBook-Pro:project-xxxx  win$ ls -l *.jade *.html
-rw-r--r--  1 win  staff   5865 12  6 23:07 index.html
-rw-r--r--  1 win  staff   5500  3  2 20:56 index.jade
-rw-r--r--  1 win  staff  14313 12  6 23:07 inside.html
-rw-r--r--  1 win  staff  18570  3  2 20:56 inside.jade
-rw-r--r--  1 win  staff  11230 12  6 23:08 service.html
-rw-r--r--  1 win  staff  11425  3  2 20:56 service.jade

轉換完成後可能需要自行再調整 jade 的結構，因為不一定是轉成你要的樣子，然後以我個人來說，使用 html2jade 的次數不高，除非是像我一樣，專案已經跑一半了，需要轉換整個專案的 html 為 template engine，但是它的確是個方便的工具 :)