fis入门简介

更新(2014.07.05):本文已经收录至fis官网http://fis.baidu.com/docs/dev/more.html

前言:

本文对fis进行概要性的介绍,由于篇幅原因,不会涉及太多使用、设计上的细节。想要了解更多,可参考官方文档。本文内容梗概:

  1. 什么是fis
  2. 环境搭建
  3. fis示例
  4. 项目配置
  5. 插件开发
  6. 打包
  7. 二次开发
  8. 对比grunt
  9. 写在后面

什么是FIS

  • FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。
  • 专注于前端构建,无需进行任何配置轻松应付常见需求。

Alt text

特点

个人总结:

  1. 贴近前端工程实际(前端项目的构建需求、问题基本都已经帮你考虑到了)
  2. 配置合理、灵活
  3. 高效
  4. 易扩展

官方:
三条命令,满足大部分的构建需求(每个命令带有数量不等的参数)

  • 跨平台:基于node搭建,可运行于windows、mac、linux等平台
  • 快速构建:合理的构建流程设计,有效提高构建性能
  • 性能优化:内置支持文件压缩、打包等
  • 本地调试:内建支持的server,方便本地调试(有java、node版)
  • 灵活扩展:插件扩展、二次开发等蛮方便的
  • 轻松上手:上手即用是没问题的,如果希望个性化定制,需对fis的整体架构设计有一些了解(单文件编译流程、插件扩展点神马的)

Alt text

Alt text

环境搭建

npm install -g fis # 安装fis
npm install -g lights # fis采用lights管理资源;要求node版本在v0.10.27以上

demo示例

假设项目如下,这里主要展示几种能力:

  1. 资源嵌入
  2. 资源定位
  3. 资源优化
  4. 本服务器
  5. 打包
fis-first-demo/
└── src
    ├── css
    │   └── main.css
    ├── img
    │   ├── avatar.png
    │   └── saber.jpeg
    ├── index.html
    ├── js
    │   ├── lib.js
    │   ├── main.js
    │   └── util.js
    └── saber.png

运行如下命令

fis release -o 
fis server start

先看看运行结果

Alt text

资源嵌入

<script type="text/javascript" src="js/lib.js?__inline"></script>

资源定位

下面图片,release后生成到/static/avatar.png

<img class="avatar" src="img/avatar.png" width="115" height="115" />

配置文件fis-conf.js

fis.config.merge({
    roadmap : {
        path : [
            {
                //所有的js文件
                reg : '**.js',
                //发布到/static/xxx目录下
                release : '/static/$&'
            },
            {
                //所有的css文件
                reg : '**.css',
                //发布到/static/xxx目录下
                release : '/static/$&'
            },
            {
                //所有img目录下的.png,.gif文件
                reg : /^\/img\/(.*\.(?:png|gif))/i,
                //发布到/static/xxx目录下
                release : '/static/$1'
            }
        ]
    }
});

资源优化

.clear{clear: both;}
.intro{margin: 10px;}
.intro .avatar{float: left;}
.intro .wording{float: left; margin-left: 10px;}

优化后

.clear{clear:both}.intro{}.intro .avatar{float:left}.intro .wording{float:left}

本地服务器

fis server start --type node

项目配置

按照配置粒度划分,fis的配置主要包括几项:

  1. project:项目配置,如编码、支持文件类型等
  2. modules:插件配置,指明用特定的插件来处理特定类型的文件。跟settings两者需要进行区分
  3. settings:针对具体插件的配置
  4. roadmap:定制项目文件属性。常用的配置项为同步路径的配置(从src到dist之间的映射)、线上路径的映射。
  5. pack:配置要打包的文件。并不会对文件进行实际打包操作,而是生成一份打包关系映射表map.json,如需实际打包,可根据这份表自行定制打包方案。
  6. deploy:部署相关的配置。

Alt text

简单例子

下面是来自官方的例子,挺详细就不展开了:http://fis.baidu.com/docs/api/fis-conf.html

//fis-conf.js
fis.config.merge({
    modules : {
        parser : {
            //coffee后缀的文件使用fis-parser-coffee-script插件编译
            coffee : 'coffee-script',
            //less后缀的文件使用fis-parser-less插件编译
            //处理器支持数组,或者逗号分隔的字符串配置
            less : ['less'],
            //md后缀的文件使用fis-parser-marked插件编译
            md : 'marked'
        }
    },
    roadmap : {
        ext : {
            //less后缀的文件将输出为css后缀
            //并且在parser之后的其他处理流程中被当做css文件处理
            less : 'css',
            //coffee后缀的文件将输出为js文件
            //并且在parser之后的其他处理流程中被当做js文件处理
            coffee : 'js',
            //md后缀的文件将输出为html文件
            //并且在parser之后的其他处理流程中被当做html文件处理
            md : 'html'
        }
    }
});
//配置字符串全部转换为ascii字符
fis.config.merge({
    settings : {
        optimizer : {
            'uglify-js' : {
                output : {
                    ascii_only : true
                }
            }
        }
    }
});

插件开发

首先需要理解fis的单文件编译过程:
个人总结:http://www.cnblogs.com/chyingp/p/fis-plugins-optimize.html
官方文档:http://fis.baidu.com/docs/more/fis-base.html