fis前端开发框架

　　FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架，相比gulp和grunt更傻瓜化，上手更容易，最近抽空学习了一下，分享一下心得。

　　FIS官网: http://fis.baidu.com/

　　FIS开发文档API：http://fis.baidu.com/docs/beginning/getting-started.html

　　慕课网FIS教程: http://www.imooc.com/learn/220

一、fis安装

npm install -g fis   全局安装fis

这里一定要全局安装，不然如果我们--save-dev 安装fis   然后--save-dev 安装lights会报错，其实这样全局安装也有好处，就是我们可以全局用fis命令。

2.安装ligths包管理器

npm install -g lights

文档https://github.com/fex-team/lights/blob/master/doc/node_module.md

Lights提供的包管理功能不仅能够通过简单命令就完成一系列操作，同时提供了私有仓库供产品线维护私有资源。
使用npm安装Lights (注意已安装的请更新至0.0.86及以上版本)。

3.获取示例

 lights install fis-quickstart-demo

#进入DEMO目录 cd fis-quickstart-demo
#编译并发布DEMO fis release
#命令启动FIS的本地调试服务器功能对构建发布的项目进行预览调试 fis server start

这里注意一下：我们可以把最近的静态资源那里，fis-conf.js,fis-conf-no-std.js,fis-conf-timestamp.js,package.json移入自己的项目里也可以实现fis的自动化处理，输出的文件到output里面含义map.json对应处理文件路径的依赖关系。

4.资源压缩

资源压缩一直是前端项目优化中非常重要的一环，使用FIS我们无需任何配置，只需要一个命令就可以完成压缩工作。

fis release --optimize  //一行密令压缩

fis release --optimize   --d  ../output    //输出文件到相对项目的output文件

5.FIS默认的产出目构录
FIS构建并不会修改源代码目录中的内容，而是拥有独立的产出的目录，FIS默认的产出目构录可以通过 fis server open 打开，你也可以通过 fis release -d path/to/output 指定你希望的输出目录

打开产出文件目录：

 fis server open 

发布到项目根目录的output目录下， 注意，这里的output其实是一个内置的部署配置名，而不是一个目录名。

fis release -d output

发布到相对 工作目录 的路径

fis release -d ../output

发布到绝对路径：

fis release -d /home/work/ouput
# win
fis release -d d:/work/output

使用配置文件的 deploy节点配置 进行发布，此配置可将代码上传至远端

fis release -d remote

6.添加文件版本
FIS能够根据静态资源的内容自动生成文件版本，自动更新资源引用路径，解决缓存更新问题，告别手动更新时间戳。
我们通过开启 --md5 参数，为项目中的静态资源添加md5版本号

$ fis release --optimize --md5 # fis release -om

7.设置打包
FIS可以通过pack来进行资源文件的合并，比如我们需要将DEMO中的公共库文件打包在一起，可以修改fis-conf.js配置，加入pack配置

//Step 1. 取消下面的注释开启simple插件，注意需要先进行插件安装 npm install -g fis-postpackager-simple
 fis.config.set('modules.postpackager', 'simple');

//通过pack设置干预自动合并结果，将公用资源合并成一个文件，更加利于页面间的共用

//Step 2. 取消下面的注释开启pack人工干预
 fis.config.set('pack', {
     'pkg/lib.js': [
         '/lib/mod.js',
         '/modules/underscore/**.js',
         '/modules/backbone/**.js',
         '/modules/jquery/**.js',
         '/modules/vendor/**.js',
         '/modules/common/**.js'
     ]
 });

//Step 3. 取消下面的注释可以开启simple对零散资源的自动合并
 fis.config.set('settings.postpackager.simple.autoCombine', true);


//Step 4. 取消下面的注释开启图片合并功能
 fis.config.set('roadmap.path', [{
     reg: '**.css',
     useSprite: true,  //合并雪碧图
     useHash:true   //使用md5
 }]);
fis.config.set('settings.spriter.csssprites.margin', 20);

8.插件安装fis-postpackager-simple进行打包处理

fis插件的安装分为两步，首先我们需要通过npm包管理工具进行插件安装

$ npm install -g fis-postpackager-simple

插件安装到本地后，我们还需要通过项目配置文件开启插件，修改项目根目录下的fis-conf.js配置，开启fis-postpackager-simple插件

$ cd fis-quickstart-demo
$ vi fis-conf.js #vi是linux下的文本编辑器，windows用户可以选用任意文本编辑器对fis-conf.js文件进行编辑。

//file : fis-conf.js
fis.config.set('modules.postpackager', 'simple');

9.应用打包
为了开发调试时更加方便 fis release 默认不会合并资源，在指定了 --pack 参数后，FIS才会进行打包合并处理。

$ fis release --optimize --md5 --pack # fis release -omp

10.自动打包
利用simple插件，我们还可以按页面进行自动合并，将没有通过pack设置打包的零散资源自动合并起来。

//file : fis-conf.js
//开启autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);
再次运行FIS构建项目
$ fis release -omp

11.合并图片
在FIS中，如果样式文件中引用图片时，添加了 ?__sprite query，那么将样式文件使用 pack 设置进行合并后，不仅仅会合并样式文件，还会将所有标识了合并的图片进行合并处理。
我们通过 pack 设置，将所有样式文件合并为 aio.css

fis.config.set('pack', {
    '/pkg/lib.js': [
        'js/lib/jquery.js',
        'js/lib/underscore.js',
        'js/lib/backbone.js',
        'js/lib/backbone.localStorage.js',
    ],
    '/pkg/aio.css': '**.css'
});
再次运行FIS构建项目
$ fis release -omp

12.fis自动化文件监听，自动刷新

文件监视
通过文件监视功能，我们可以要求FIS在项目文件出现修改时，自动增量构建项目文件

fis release --watch #fis release -w

自动刷新
我们只需要在文件监视的参数基础上添加 --live 或 -L 参数即可实现在项目文件发生修改后，自动刷新页面的功能，大幅提高页面制作效率。

fis release --watch --live #fis release -wL       #要求浏览器环境支持WebSocket

大体上就学到了这些同学，用过之后，整体感觉fis自动化，比较适合要求快速开发的项目，我们静态开发，然后用fis进行压缩，加版本好，然后获取发布文件修复路径，删除配置文件发布，就ok了。以后我也将结合fis、grunt、gulp一起来使用，我想会很棒。