為前端開發省時省力
還記得前幾天跟大家聊了聊神奇的 Pug 嗎？算上很早之前的 TypeScript，又加上昨天推送的 Sass，頁面、樣式和邏輯三個層次對應的新工具都已經介紹給大家了。這些工具無一不是對以往的編程習慣（HTML, CSS, JavaScript）的一種創新和改變。我們善於利用這些工具，就能極大程度減少開發難度和強度，讓我們以更加便利、快捷的方式編寫簡潔、清晰的 Web 應用程序。那麼今天，我們就來聊聊如何整合這三個工具。
- 硬體：
- Windows PC/ Linux PC/ Mac 任一台
- 接入網路（因為需要安裝必備的軟體）
- 軟體：
- Ruby（Windows 和 Linux 都需要手動安裝，macOS 不需要安裝，安裝過程不是本文重點，所以不再描述）
- Sass（官網 https://sass-lang.com可以看到更詳細的安裝方案，通常在 Terminal 或者 cmd 當中使用 gem 命令安裝就可以了）
- Node.js（此軟體的安裝非常方便，Windows 上有 GUI 的安裝程序，macOS 和 Linux 上有命令行工具包，解壓，添加環境變數即可）
- Pug（Pug 可以通過 NPM 來安裝，使用命令
npm install pug n即可安裝）
- TypeScript (同上，命令為
npm install -g typescriptn直接在命令行工具執行)
- *強烈建議，安裝一款高效率的代碼編輯器，推薦使用 VS Code, 還可以使用 SublimeText 3, Atom 等，非必需，但是強烈安利
有了以上軟體和硬體條件，就可以分析原理，編碼實現了。
Sass
Sass 的使用方式，常常是在命令行工具如 cmd, bash 中使用命令
sass filename.scssn
不僅如此，sass 命令還提供了一些額外參數，比如 --watch 表示監聽文件改動，實時預處理等等，所以，對於位於 A/sass/ 目錄下的文件，要想實時轉化為 B/css/ 目錄下的文件，可以使用命令：
sass --watch A/sass/:B/css/n
Pug
Pug 的使用方式之前已經分享過了，它同樣支持實時監聽和編譯，也支持 -o 參數定義輸出目錄，不過其缺陷是無法監聽源目錄中文件的增加，智能識別既有文件的改動，不過這一缺陷也沒有什麼大的問題，我們可以嘗試解決它。那麼，通常的命令就是：
pug -w -P A/pug/ -o B/html/n
（此處建議加上 -P 參數，用來使生成的 HTML 文檔格式化，並且便於閱讀）
TypeScript
TypeScript 就更簡單了，MS 提供了其編譯工具 tsc。其調用的命令：
tsc -w --outDir B/Script/ A/*.tsn
這一命令主要就是要監聽 A目錄下的所有 *.ts 文件的變化，實時編譯為 JavaScript 文件。
Node
Node 這個步驟其實是最常見的，你可以從網上隨便找一段簡單的「node搭建http伺服器」的代碼，閱讀後，將代碼保存為一個 app.js 文件，使用命令：
node app.js n
就可以監聽指定的埠，進行頁面渲染和訪問了。
上面這些命令每個都需要佔用一個 Shell 進程，如何進行整合，只進行一次調用就能讓各命令執行呢？我想到了 bash 腳本。由於鏈接操作符 & 可以實現多命令同時執行，所以我準備採用這樣的方式來進行。
項目文件結構
/: 根目錄n app.js: Node 伺服器代碼，用於開啟對 HTTP 訪問的偵聽n pug: Pug 文件所在目錄n sass/: Sass 文件所在目錄n ts/: TypeScript 文件所在目錄n Content/: css文件所在目錄n Script/: js文件所在目錄n : html文件所在目錄n
我們把 dev.sh 文件放在根目錄內，然後編寫其中的代碼：
Bash#! /bin/bashnpug -w -P pug/ -o . & sass --watch scss:Content & node app.js & tsc -w --outDir Script/ ts/*.ts & echo "success!"n
編輯完成，一定要使用
chmod +x dev.shn
命令修改執行許可權。修改完成，執行此文件，就可以享受非常方便的代碼編寫了。
便利在哪裡？直接寫 Sass 文件，TS 文件和 Pug 文件，寫完了打開瀏覽器，訪問 app.js 文件里定義的埠，所有的修改都被同步了！
開發，要重在設計，把最寶貴的時間留給邏輯設計和代碼設計，這才是工程師該做的事。
淵說，把點滴的收穫，分享給每個人。
歡迎關注微信公眾號 MSTest0
推薦閱讀：