配置 FIS 来适配 go revel 框架以优化前端缓存策略

对于前端工程师来讲，浏览器缓存优化是个永远的话题。前几天看了知乎上的一个问答：《大公司里怎样开发和部署前端代码？》，深觉得然，因此决心使用 FIS 来优化自身的前端文件。

咱们的项目使用了 go 语言的 revel 作 web 框架。这个框架的目录结构混合了先后端的文件，无法作到先后端开发的彻底分离。因此咱们要作的第一步，就是分离先后端的文件。

分离先后端

由于已经决定使用 FIS 来优化前端，因此特别利用了 FIS 的编译文件这个功能。既然无法作到彻底的先后端分离，至少也要分离一部分吧。

首先把 app/views/ 以及 public/ 这两个文件夹移动到 revel 目录以外，假设咱们的工程文件都保存在 server/ 下，咱们在 server/ 的同级建立另一个目录 web/，因此项目文件的结构大概是这样的：

├─┬ server
    │ ├── app
    │ ├── ...
    │ └── tests
    └─┬ web
        ├─┬ app
        | └── views
        └── public

而后在 web/ 下新建一个 fis-conf.js 文件，内容以下：

fis.config.merge({
        deploy : {
            local : {
                to : '../server'
            }
        }
    });

此时若是咱们运行命令 fis release -md local 就会发现，web/ 下的文件都按照目录结构保存到了 server/ 下，这样，咱们就能够在 web/ 下专一的写前端代码，而不用理会 server/ 下的后端代码了。若是用了 fis -w 的话更是全自动了。

资源从新定位

HTML 文件

以前因为要区分服务器环境和本地开发环境，因此在 html 中大量使用了 .RunMode 来判断部署环境，例如：

<img src="{{if eq .RunMode "prod"}}http://cdn.example.com{{end}}/img/image.png">

如今使用 FIS 之后，这样的写法并不被支持，并且也没有必要这样写。由于 FIS 会自动在打包的时候插入 cdn 域名，开发的时候彻底不须要考虑。因此首先就是要把全部这种资源定位所有修改为指向本地资源。

CSS 文件

另一个会引用静态资源的就是 css 了。因为 css 没有条件判断之类，因此以前都是在上传的时候手动修改资源文件的引用地址，文件一多，至关痛苦。用了 FIS ，这部分工做彻底能够变成全自动替换修改，妈妈不再用担忧我漏掉几个文件没改了呢。只要把全部的资源定位改为指向本地资源的便可。

JavaScript 文件

一样的，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 来优化前端代码就告一段落了。