Day 21 透過 pug 建立開發測試用網頁

pug 這個 HTML 樣板引擎是 Express.js 預設的樣板引擎，但它也可以單獨使用，由於筆者很習慣使用 pug 來撰寫 HTML，所以這次也直接選擇使用 pug 來建立示範程式的網頁。

建立網頁的骨架

筆者打算把這個專案的網頁共用的東西直接寫成一個獨立的檔案，方便其他網頁可以直接 extend。

建議讀者可以搭配原始碼一起閱讀，原始碼網址為 https://github.com/taichunmin/chameleon-ultra.js/blob/master/pug/include/bootstrapV4.pug

這個網頁骨架的基礎架構如下：

/include/bootstrapV4
|   block beforehtml 在這裡可以放網頁專屬的 pug 變數
|
+---html
    |
    +---head
    |   |   meta, title
    |   |   Google Analytics
    |   |   shared css
    |   |   block style 在這裡可以放網頁專屬的 css
    |
    +---body
        |
        |   block content
        |   shared javascript
        |   chameleon-ultra.js javascript
        |   block script 在這裡可以放網頁專屬的 javascript

可以用來開發測試用的網頁

由於這個專案主要使用 Web Serial 及 Web BLE，所以筆者有做一個測試用的網頁，網頁上只會有一個下拉選單用來選擇連線方式，以便我們可以直接在瀏覽器上的開發者工具中進行開發及測試。

這個網頁的網址為 https://taichunmin.idv.tw/chameleon-ultra.js/test.html

建議讀者可以搭配原始碼一起閱讀，原始碼網址為 https://github.com/taichunmin/chameleon-ultra.js/blob/master/pug/src/test.pug

這個測試網頁會同時建立 usb 及 ble 的 ChameleonUltra，然後根據選擇的連線方式把指定的物件放在 vm.ultra 方便你在開發者工具中的 Console 使用。

以取得 firmware 版本的指令為例，你可以在開發者工具中使用下方的程式碼來對 ChameleonUltra 下指令：

await vm.ultra.cmdGetAppVersion() // 1.0
await vm.ultra.cmdGetGitVersion() // 7616862

編譯 pug 檔案

pug 檔案會需要編譯過後才能變成 HTML 檔案，所以我們會需要自己寫一個編譯 pug 檔案的程式。

建議讀者可以搭配原始碼一起閱讀，原始碼網址為 https://github.com/taichunmin/chameleon-ultra.js/blob/master/pug/build.ts

這個程式碼會先透過 dotenv 載入 .env 檔案中設定的資料放到環境變數中。

然後程式會尋找位於 pug/src 內的所有 .pug 檔案並編譯成 .html 檔案，並且放到 dist 資料夾中。

如果 NODE_ENV 環境變數等於 production 的話，程式會把編譯後的 HTML 檔案使用 UglifyJS 壓縮。