fis入門簡介 - chyingp－IT工程師數位筆記本

文章出處

更新（2014.07.05）：本文已經收錄至fis官網：http://fis.baidu.com/docs/dev/more.html。

前言：

本文對fis進行概要性的介紹，由于篇幅原因，不會涉及太多使用、設計上的細節。想要了解更多，可參考官方文檔。本文內容梗概：

什么是fis
環境搭建
fis示例
項目配置
插件開發
打包
二次開發
對比grunt
寫在后面

什么是FIS

FIS是專為解決前端開發中自動化工具、性能優化、模塊化框架、開發規范、代碼部署、開發流程等問題的工具框架。

專注于前端構建，無需進行任何配置輕松應付常見需求。

Alt text

特點

個人總結：

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

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

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

Alt text

環境搭建

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

demo示例

假設項目如下，這里主要展示幾種能力：

資源嵌入
資源定位
資源優化
本服務器
打包

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的配置主要包括幾項：

project：項目配置，如編碼、支持文件類型等
modules：插件配置，指明用特定的插件來處理特定類型的文件。跟settings兩者需要進行區分
settings：針對具體插件的配置
roadmap：定制項目文件屬性。常用的配置項為同步路徑的配置（從src到dist之間的映射）、線上路徑的映射。
pack：配置要打包的文件。并不會對文件進行實際打包操作，而是生成一份打包關系映射表map.json，如需實際打包，可根據這份表自行定制打包方案。
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

Alt text

實際例子：`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，具體的打包方案需要用戶自行定制。

打包規則來源

依賴聲明
顯示聲明

依賴聲明

比如在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會定義為工具框架的原因。

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

滿足定制需求（廢話）
解決諸多問題，這里除了項目本身的需求，還有工具本身可能存在的問題，如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的優勢吧。

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

寫在后面

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

一些鏈接：
官網：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

文章列表

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds