配置 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'

			}

		}

	});