FIS起步学习

引言：本文主要是对FIS入门学习的一个总结，希望能给读者带来一些FIS学习的思考，也是自我学习方法的剖析。姑且把这版定为FIS起步学习v1.0.0吧。后续会根据自己的理解对内容进行调整。亦或编写FIS进阶学习、FIS高级使用。。。好了，这里就不YY了。在文章最后，发一点福利给读者。

说实话让我一个刚入门不到半年的小喽啰总结如何学习FIS，我还是有点犯怵的，因为FIS包含的内容还是很多的。自己反思了一下，其实学得并不好，很多内在的原理机制还不甚了解。希望可以慢慢来，不断加深对这个框架的理解。

在初期，我们先不要考虑太多，官方文档【注：我们目前使用的是FIS2】内容还是很多的，想看全了再开始项目可能耗时过多且条件不允许。那么，在短时间内要能将FIS学到的内容掌握并应用到实际项目中，还是要寻找一点方法的。

对比官方文档的大纲内容，我们可以开始FIS的起步学习。

1. 为何使用FIS

我们姑且先按照大纲的顺序开始FIS的学习，首先，在使用任何一个框架之前，我们都需要知道为什么要用这个框架，它给我们带来的好处是什么。我们通过阅读官网”快速入门“的内容，就能知道FIS的两个好处——资源压缩和资源合并。通过压缩和合并资源，我们减少了网络请求的开销，还起到了简单的资源安全性的保护。还有一个好处就是模块化。这个在“进阶使用”中会有所提及。但是，如果没有模块化开发经验的同学，估计看完了这两部分，又或者把后面的内容都看完了，也不一定能理解到模块化的含义。其实，我们可以暂时不考虑这个问题，因为在后来的实际项目开发中，你会慢慢理解的。至于FIS还有其他什么好处，这里也暂时不考虑，在往后的使用中，还会有新的总结。

2. FIS命令行

可能看完官网，我们发现操作了很多的fis命令，但其实，最常用的就是以下三个：

fis release： 编译并发布你的项目
fis install： 安装一些公共库组件比如 jQuery、echarts，提供的组件都放在 https://github.com/fis-components 仓库中。
fis server：  启动一个 1.8M 大小的内置调试服务器，它采用php-java-bridge技术实现， 依赖java、php-cgi外部环境 ，可以完美支持运行php程序哦。

这三个命令就是使用频率最高的。其中，我们在项目开发中，使用频率最高的，就是fis release了。

对于官网中给出的release的[options]参数，一定要认真学习，多多练习和体会，尤其是理解-d参数，它指定一个发布路径，这个路径不仅仅是本地路径，还可以是一个服务器的路径。

3. 文件的产出、流向和内容变化

这是FIS学习中需要特别注意的，官网在“命令行”章节中，也给了我们github上的练习demo，如何利用demo结合这些命令了解整个文件发布流程呢？我们在学完“命令行”的内容时，可能还是不足以了解的。这时候，我们可以先看看后面的几章内容——“资源定位”、“内容嵌入”、“依赖声明”和“roadmap详解”。

看完这些，我们就明白了代码在编译后会变成什么样，包括线上路径是如何转变而来的，文件是如何引入的，文件件是如何关联依赖的，以及文件是如何打包合并在一起，map.json这个很关键的东东是什么时候出现并且可以控制哪些内容。

当我们有了这些知识储备，打开发布项目的文件目录，通过执行release的命令，可以对比查看文件变化。记住，重点去观察文件路径（如static、templates等）的变化，以及map.json的内容变化。了解这些内容，可以巩固对release指令已经文件产出路径配置的知识点。最后，我们还可以试着将整个发布文件夹中的内容删空，再从init一个demo开始，就能发现每个命令执行后会产出哪些内容，这样，对整个代码工作流程及工作环境就有了基本的认识了。到未来参与项目开发，将本地代码发布到服务器，也是同样的原理。

对于“进阶使用”之后的内容——“前端模块化”和“更多插件”的内容，我们暂时不必太过于纠结。因为初学接触这些东西暂时是理解不了的。

4. 更多文档

学到这里，我们已经将大纲的“快速入门”和“进阶使用”的知识掌握得差不多了。那么，按照大纲，进入到“二次开发”了，但是，这部分，对于初学，可以先暂时跳过。对于“二次开发”中的“插件开发”，我们知道module.exports是一个插件借口就可以理解后续接触项目中的一些语法了。这部分的内容不建议初学者过于纠结。

接下来就是重点了，“更多文档”中，给我们提供了很多扩展的空间，其中包括原理解释和思考的延伸。文章有很多篇，但是如果看完要体会，按照目前的知识储备，很难完全看得懂。这里就为初学者推荐本章罗列出的需要琢磨的文章：

FIS原理的两篇——《三种语言能力》和《编译过程运行原理》希望初学者能反复咀嚼，内容不多且易懂。

性能优化——《静态资源版本更新与缓存》这个是将前面接触的知识做了综述和思考，很值得一看。

插件系统——《插件调用机制》和《插件扩展点列表》，必读的两篇，也不难。

FIS杂谈——《FIS入门简介》、《FIS与FIS-PLUS的区别》和《不完全正则指南》。入门简介可以给初学者巩固之前的学习内容，相当于一个汇总。fis和fisp的区别，一定要搞清楚，我们项目中用的fis解决方案就是fisp。正则的使用，还是蛮多的，基本的用法就在这个不完全指南中。当然，它还有推荐的那篇《正则表达式30分钟入门教程》 相信大家或多或少都拜读过，30分钟搞定肯定不可能，但是总结得很经典。

5. 解决方案FIS-PLUS

我们的实际项目，用的就是FIS的解决方案fisp，fisp的学习，我们当然无可偷懒的参照fisp快速入门文档 一步步学习，搭建工作环境。

6. 配置API

对于这个API文档，初学者如果时间充足，大致浏览一遍即可，因为即便认真看完如果不使用，还是容易遗忘。了解大致内容，遇到问题可以快速定位，查阅文档。

7. 30好分钟搭建fisp环境

在文章的最后，给读者一点福利，让你30分钟搞定fisp开发环境的搭建。下面是配置的记录。

之前装brew那是随手装，这回，坑爹的官网居然把他给墙了。翻墙工具之前用的是lantern，免费的好东东。但是只是浏览器翻墙。后来用了一个花钱的翻墙东东，shadowsocks，可以全局代理。但是吧，打开了还是不行。最后没有办法，就搞了一个有效的方法。

我们来看官网的这个命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

其实就是ruby执行 https://raw.githubusercontent.com/Homebrew/install/master/install 这个url的文件内容嘛，我直接通过翻了墙的浏览器访问这个url，另存这个文件，就下载了install.txt文件。最后，把这个文件放到~/目录下就，执行

ruby install.txt

就return安装就行了。

有了brew这个好东东，装东西都很方便了。在FIS安装之前，我们先要有一个node环境，FIS的工具包都是在npm上托管的，装好node以后就可以执行npm命令了。

当然，安装node我们可以去官网下载安装包，但是，前提是能忍受龟速。。用brew安装简单粗暴，直接执行:

brew install node

还有一个我们常用的命令，mac不自带的，可以一并装了，就是查看文件树形结构的tree命令。执行：

brew install tree

还有一个就是装npm包的时候，有时候也会遇到被墙的问题，这个问题之前已经解决了，可以按如下的方法解决,编辑器打开.npmrc文件，vi ~/.npmrc，在vim编辑器中写入registry = http://registry.npm.taobao.org 保存退出，这样就默认使用了淘宝第三方的镜像，就可以解决被墙的问题。

基本完成这些初始化的配置操作，剩下的，我们只要按照fisp快速入门文档的描述，一步步操作，基本很快就可以将环境配置好了。

我们顺序执行以下命令即可，将开发环境简单快速的配置好：

1.执行

npm install -g fis-plus

安装好fisp，使用fisp -v查看版本可检验是否安装成功。

2.执行

npm install -g lights

安装好lights。

3.执行

brew tap homebrew/homebrew-php

再执行

brew install php55 --with-cgi

安装php-cgi。

安装完这些，我们可以试试发布项目了。然而，事情可能有时候不是一帆风顺的，因为我们有自己的特色。。

如果你在发布过程中遇到以下两个报错：

Ω ................................
 [ERROR] unable to load plugin [fisp-parser-lsh-less] or [fis-parser-lsh-less]

抑或

Ω ................................
 [ERROR] unable to load plugin [fisp-parser-less-2.x] or [fis-parser-less-2.x]

莫慌，这是飞姐自己写的less包没有装，我们装上这两个包就OK了。

执行

sudo npm install -g fis-parser-lsh-less

就能解决第一个报错的问题，对于第二个报错的问题，可能同理执行

sudo npm install -g fis-parser-lsh-less-2.x

会失败，但是还有一个方法，我们下载fis-parser-lsh-less-2.x这个包，解压移动到/usr/local/lib/node_modules/目录下即可。我们查看这个目录，就知道我们的包都是默认安装到了这个目录下。

但是，事情可能有意外哦，比如你还可能遇到这个警告提示：

 Ω ................................lib set

....................................................................................................................
 [WARNI] csssprites does not support your node v5.10.0, report it to https://github.com/xiangshouding/fis-spriter-csssprites/issues

这就是因为我们装的版本太高了，有的支持不了，这时候，我们可以借助n和nvm管理Node的版本。

执行：

sudo npm install -g n

就可以安装成功了。

我们现在可以安装自己指定的版本了，以我们工作的node版本v0.12.3为例，执行以下命令：

n 0.12.3

这时，我们就装好了我们开发需要用的版本了。我们还可以装多个版本，通过n来切换。