靜態資源緩存控制編譯工具

前不久在 知乎 上回答了一個問題：大公司里怎樣開發和部署前端代碼？。其中講到了大公司在前端靜態資源部署上的一些要求：

1. 配置超長時間的本地緩存 —— 節省帶寬，提高性能
2. 采用內容摘要作為緩存更新依據 —— 精確的緩存控制
3. 靜態資源CDN部署 —— 優化網絡請求
4. 更資源發布路徑實現非覆蓋式發布 —— 平滑升級

其中比較復雜的部分就是 以文件的摘要信息為依據，控制緩存更新與非覆蓋式發布 這個細節。因此基于 fis 包裝了一個簡單的命令行工具，并設立此項目，用于演示這部分功能。

這個工具基于 fis 的小工具是完全可以用作工程中的，有任何問題可以在 這里 留言。

請跟著下面的步驟來使用這個命令行小工具：

第一步：安裝工具

這個命令行小工具依賴 nodejs 環境，因此，請先確保本地安裝了它。

使用 nodejs 隨帶的 npm 包管理工具進行安裝：

npm install -g rsd

第二步：創建項目

在 命令行 下clone本倉庫，或者自己創建一個新的項目，并進入：

mkdir rsd-project  # 項目名任意 cd rsd-project

在項目根目錄下創建一個空的 fis-conf.js 文件，這是工具配置，什么都不用寫，空著就行。

然后開始在項目目錄下，隨意創建或添加 頁面、腳本、樣式、圖片、字體、音頻、視頻等等前端資源文件，正常寫前端代碼吧！

第三步：發布代碼

在項目根目錄下執行：

rsd release --md5 --dest ../output

然后去到 ../output 目錄下去查看一下產出結果吧，所有靜態資源都以md5摘要形式發布了出來，所有資源鏈接，我說 所有鏈接，包括html中的圖片、樣式、腳本以及js中的資源地址、css中的資源地址全部都加上了md5戳。

上述命令中，--md5 就是表示要給所有資源定位標記加上摘要信息的意思，不加這個參數就沒有摘要信息處理。--dest ../output 表示把代碼發布到當前目錄上一級的output目錄中。整個這條命令還可以簡寫成：

rsd release -m -d ../output

或者進一步連寫成：

rsd release -md ../output

在本地服務器中瀏覽發布代碼

你本地安裝了諸如 Apache、Nginx、Lighttpd、IIS等服務器么？如果安裝了，假設你的服務器 根目錄 在 d:\wwwroot，你可以利用rsd工具的release命令，把代碼發布過去，比如：

rsd release -md d:\wwwroot

這樣就把代碼發布到了本地服務器根目錄下，然后就可以在瀏覽器中查看效果了！

如果你本地沒有安裝任何服務器，你可以使用rsd內置的調試服務器，執行命令：

rsd server start

接下來我們同樣要把代碼發布到這個內置服務器中，release命令如果省略 --dest <path>參數，就表示把代碼發布到內置服務器的根目錄下：

rsd release -m

在瀏覽器中訪問： http://localhost:8080 即可

一些小技巧

1. rsd集成了對很多前端編程語言的支持，包括：
   • 類CSS語言：less, sass, scss, stylus
   • 類JS語言：coffee-script
   • 類HTML語言：markdown, jade
   • 前端模板：handlebars-v1.3.0, EJS
2. 內置了壓縮器，在release的時候追加 -o 或者 --optimize 參數即可開啟，壓縮器包括：
   • clean-css: 壓縮所有類CSS語言代碼
   • uglify-js: 壓縮所有類JS語言代碼
   • html-minifier: 壓縮所有類HTML語言代碼

3. 還可以給資源加CDN域名，在release的時候追加 -D 或者 --domains 參數即可，域名配置寫在fis-conf.js里：

   // fis-conf.js fis.config.set('roadmap.domain', [ 'http://localhost:8080' ]); 

4. 所有常規代碼中的資源定位接口都會經過工具處理，包括：

   • 類CSS文件中：
     • 背景圖url
     • font-face字體url
     • ie特有的濾鏡屬性中的src
   • 類JS文件中：
     • 提供了一個叫 __uri('path/to/file') 的編譯函數用于定位資源
   • 類HTML文件中：
     • link標簽的href屬性
     • script, img, video, audio, object 等標簽的src屬性
     • script標簽中js代碼里的資源定位標記
     • style標簽中css代碼里的資源定位標記
5. 所有資源文件可以任意相互引用，工具會處理資源定位標記，使之服從知乎回答中提到的優化策略。
6. 還提供了資源內嵌的編譯接口，用于把一個資源的內容以文本、字符串或者base64的形式嵌入到 任意 一個文本文件中。

7. 為了不用每次保存代碼就執行一下release命令，工具中提供了文件監聽和瀏覽器自動刷新功能，只要在release的時候在追加上 -w 和 -L 兩個參數即可（注意L的大小寫），比如：

   rsd release -omwL  #壓縮、加md5戳、文件監聽、瀏覽器自動刷新 

關于這個小工具

它的原碼在 這里。是的，就這么一點點代碼，花了大概半小時寫完的，因為一切都在 fis 中集成好了，我只是追加幾個語言編譯插件而已。