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是專為解決前端開發中自動化工具、性能優化、模塊化框架、開發規范、代碼部署、開發流程等問題的工具框架。
• 專注於前端構建，無需進行任何配置輕松應付常見需求。

特點

個人總結：

1. 貼近前端工程實際（前端項目的構建需求、問題基本都已經幫你考慮到了）
2. 配置合理、靈活
3. 高效
4. 易擴展

官方：
三條命令，滿足大部分的構建需求（每個命令帶有數量不等的參數）

• 跨平台：基於node搭建，可運行於windows、mac、linux等平台
• 快速構建：合理的構建流程設計，有效提高構建性能
• 性能優化：內置支持文件壓縮、打包等
• 本地調試：內建支持的server，方便本地調試（有java、node版）
• 靈活擴展：插件擴展、二次開發等蠻方便的
• 輕松上手：上手即用是沒問題的，如果希望個性化定制，需對fis的整體架構設計有一些了解（單文件編譯流程、插件擴展點神馬的）

環境搭建

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 

先看看運行結果

資源嵌入

<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：部署相關的配置。

簡單例子

下面是來自官方的例子，挺詳細就不展開了：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

實際例子：fis-optimizer-test

配置：

fis.config.merge({ modules : { optimizer : { //js后綴文件會經過fis-optimizer-test插件的壓縮優化 js : 'test' } } }); 

插件源碼：

/* * fis插件示例 * http://www.cnblogs.com/chyingp/p/fis-plugins-optimize.html */ 'use strict'; module.exports = function(content, file, conf){ return content+'\nvar nick ="程序猿小卡"'; }; 

fis release -o就可以看到效果了

console.log('inline file'); function hello(argument) { var nick = 'casper'; var age = 26; } var nick ="casper" // 這貨就是fis-optimizer-test加上的 

打包

前面提到過，fis的打包只是生成一份映射表map.json，具體的打包方案需要用戶自行定制。

打包規則來源

1. 依賴聲明
2. 顯示聲明

依賴聲明

比如在index.html里聲明依賴

<!--
    @require demo.js
    @require "demo.css"
-->

編譯后生成

{
    "res" : { "demo.css" : { "uri" : "/static/css/demo_7defa41.css", "type" : "css" }, "demo.js" : { "uri" : "/static/js/demo_33c5143.js", "type" : "js", "deps" : [ "demo.css" ] } }, "pkg" : {} } 

顯示聲明

打包配置如下：

//fis-conf.js fis.config.merge({ pack : { //打包所有的demo.js, script.js文件 //將內容輸出為static/pkg/aio.js文件 'pkg/aio.js' : ['**/demo.js', /\/script\.js$/i], //打包所有的css文件 //將內容輸出為static/pkg/aio.css文件 'pkg/aio.css' : '**.css' } }); 

生成的表map.json

{
    "res": { "demo.css": { "uri": "/static/css/demo_7defa41.css", "type": "css", "pkg": "p1" }, "demo.js": { "uri": "/static/js/demo_33c5143.js", "type": "js", "deps": [ "demo.css" ], "pkg": "p0" }, "index.html": { "uri": "/index.html", "type": "html", "deps": [ "demo.js", "demo.css" ] }, "script.js": { "uri": "/static/js/script_32300bf.js", "type": "js", "pkg": "p0" }, "style.css": { "uri": "/static/css/style_837b297.css", "type": "css", "pkg": "p1" } }, "pkg": { "p0": { "uri": "/static/pkg/aio_5bb04ef.js", "type": "js", "has": [ "demo.js", "script.js" ], "deps": [ "demo.css" ] }, "p1": { "uri": "/static/pkg/aio_cdf8bd3.css", "type": "css", "has": [ "demo.css", "style.css" ] } } } 

二次開發

官方介紹

1、簡單的一個配置即可成為另外一個工具
2、自定義插件+規范+... 一個解決諸多問題的解決方案

FIS具有高擴展性，可以通過配置進行各種目錄結構等的定制，同時FIS擁有足夠數量的插件，用戶可以下載這些插件，配置使用。也可以按照自己的需求開發定制插件。可能有些人會問，如果插件多了后該如何維護。其實，FIS具有可包裝性。比如現在市面上的fis-plus、gois、jello、spt等都是包裝了FIS，可以使用這種包裝性，把多個插件以及FIS包裝成為新的一個工具。這就是為什么FIS會定義為工具框架的原因。

上面的介紹來自官方文檔。對於為何需要二次開發，個人的看法是：

1. 滿足定制需求（廢話）
2. 解決諸多問題，這里除了項目本身的需求，還有工具本身可能存在的問題，如fis、fis插件的升級、多版本並存問題（fis是全局安裝的，升個級，所有項目跑不轉了這可攤上大事了。。），

drwxr-xr-x 10 nobody staff 340 7 2 23:14 colors drwxr-xr-x 7 nobody staff 238 7 2 23:14 commander drwxr-xr-x 7 nobody staff 238 7 2 23:14 fis-command-install drwxr-xr-x 11 nobody staff 374 7 2 23:14 fis-command-release drwxr-xr-x 9 nobody staff 306 7 2 23:14 fis-command-server drwxr-xr-x 9 nobody staff 306 7 2 23:14 fis-kernel drwxr-xr-x 8 nobody staff 272 7 2 23:14 fis-optimizer-clean-css drwxr-xr-x 8 nobody staff 272 7 2 23:14 fis-optimizer-png-compressor drwxr-xr-x 8 nobody staff 272 7 2 23:14 fis-optimizer-uglify-js drwxr-xr-x 7 nobody staff 238 7 2 23:14 fis-packager-map drwxr-xr-x 7 nobody staff 238 7 2 23:14 fis-postprocessor-jswrapper drwxr-xr-x 8 nobody staff 272 7 2 23:14 fis-spriter-csssprites 

舉個例子：fis-hello

遠比想象中要容易，直接看官方文檔吧：http://fis.baidu.com/docs/dev/solution.html

對比grunt

經常有人拿grunt、fis進行對比，其實兩者並不是同一層面的內容。grunt是前端構建工具，而fis則是前端集成解決方案。

舉個不是很恰當的例子，就拿http協議、瀏覽器的關系來說吧。

• grunt：制定了http協議，但想要瀏覽網頁，你得先開發個瀏覽器
• fis：制定了http協議，同時提供了瀏覽器。哦，你還可以安裝一些擴展。

這里就講fis相對於grunt的優勢吧。

1. 更貼近前端工程實際（廢話）
2. 更加靈活合理的配置
3. 更加高效的構建流

寫在后面

寫得匆忙，如有錯漏敬請指出 :)

一些鏈接：
官網：http://fis.baidu.com/
getting started：http://fis.baidu.com/docs/beginning/getting-started.html
項目配置：http://fis.baidu.com/docs/api/fis-conf.html
插件開發：http://fis.baidu.com/docs/dev/plugin.html
解決方案封裝：http://fis.baidu.com/docs/dev/solution.html