對於前端工程師來講,瀏覽器緩存優化是個永遠的話題。前幾天看了知乎上的一個問答:《大公司裏怎樣開發和部署前端代碼?》,深覺得然,因此決心使用 FIS 來優化自身的前端文件。javascript
咱們的項目使用了 go 語言的 revel 作 web 框架。這個框架的目錄結構混合了先後端的文件,無法作到先後端開發的徹底分離。因此咱們要作的第一步,就是分離先後端的文件。css
由於已經決定使用 FIS 來優化前端,因此特別利用了 FIS 的編譯文件這個功能。既然無法作到徹底的先後端分離,至少也要分離一部分吧。html
首先把 app/views/ 以及 public/ 這兩個文件夾移動到 revel 目錄以外,假設咱們的工程文件都保存在 server/ 下,咱們在 server/ 的同級建立另一個目錄 web/,因此項目文件的結構大概是這樣的:前端
├─┬ server │ ├── app │ ├── ... │ └── tests └─┬ web ├─┬ app | └── views └── public
而後在 web/ 下新建一個 fis-conf.js 文件,內容以下:java
fis.config.merge({ deploy : { local : { to : '../server' } } });
此時若是咱們運行命令 fis release -md local
就會發現,web/ 下的文件都按照目錄結構保存到了 server/ 下,這樣,咱們就能夠在 web/ 下專一的寫前端代碼,而不用理會 server/ 下的後端代碼了。若是用了 fis -w
的話更是全自動了。web
以前因爲要區分服務器環境和本地開發環境,因此在 html 中大量使用了 .RunMode 來判斷部署環境,例如:npm
<img src="{{if eq .RunMode "prod"}}http://cdn.example.com{{end}}/img/image.png">
如今使用 FIS 之後,這樣的寫法並不被支持,並且也沒有必要這樣寫。由於 FIS 會自動在打包的時候插入 cdn 域名,開發的時候徹底不須要考慮。因此首先就是要把全部這種資源定位所有修改爲指向本地資源。後端
另一個會引用靜態資源的就是 css 了。因爲 css 沒有條件判斷之類,因此以前都是在上傳的時候手動修改資源文件的引用地址,文件一多,至關痛苦。用了 FIS ,這部分工做徹底能夠變成全自動替換修改,媽媽不再用擔憂我漏掉幾個文件沒改了呢。只要把全部的資源定位改爲指向本地資源的便可。瀏覽器
一樣的,js 文件裏的資源定位也須要修改。以前經過 runMode 判斷的,如今統統不須要了。不過跟 html 和 css 不一樣的是,js 裏須要特別的提示符。緩存
以前引用資源像這樣:
var img = "/path/to/image.png";
如今要改爲這樣:
var img = __uri("/path/to/image.png");
不然 FIS 一樣是不識別的,也就不會自動替換了。
項目開發的時候,咱們使用了 LESS 和 CoffeeScript 這兩種預編譯語言來加速開發。以前都是用 sublime text 的插件在保存文件的時候自動編譯到指定目錄。使用 FIS 後,這部分工做也能夠交給 FIS 來作。尤爲像 CoffeeScript,插件不支持編譯的時候保持目錄結構,至關痛苦。
首先咱們要安裝幾個編譯器。
npm install -g fis-parser-less fis-parser-coffee-script
而後在項目根目錄下的 fis-conf.js
中添加代碼,讓它看起來像這樣:
fis.config.merge({ modules : { parser : { coffee : 'coffee-script', less : ['less'] } }, roadmap : { ext : { less : 'css', coffee : 'js' } }, deploy : { local : { to : '../server' } } });
這樣,咱們就能夠專一的寫 coffee-script 和 less,而不用管編譯什麼的了,也沒必要捆綁在一個編輯器上了。
至此,此次使用 FIS 來優化前端代碼就告一段落了。