对于前端工程师来说，浏览器缓存优化是个永远的话题。前几天看了知乎上的一个问答：《大公司里怎样开发和部署前端代码？》，深以为然，所以决心使用 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 来优化前端代码就告一段落了。