FIS

時間 2019-12-05

標籤 fis 简体版

原文原文鏈接

Fis簡介

一個工程化的工具，主要用來處理前端的項目。
做用：代碼合併，代碼壓縮，資源定義，資源嵌套等等。javascript

fis 是基於流的處理，fis有本身的一個流處理過程：css

lint：代碼規範html
parser：代碼編譯前端
perprocessor：前置處理java
standard：代碼標準化瀏覽器
protprocessor：後置處理緩存
optimizer：優化處理app
perpackager：前置打包模塊化
packager：打包過程工具
spriter：圖片製做精靈圖
postpackager：後置打包
deploy: 發佈

fis-conf

使用fis必須配置fis-conf文件，是fis的入口文件，fis-conf文件名是固定的，並且項目中必需要有此文件

release

release指令

發佈。執行這個指令，對項目進行發佈。
參數： -d 發佈到某個目錄下，後面加上目錄的名稱，這個目錄相對於fis-conf這個文件.

fis3 release -d test

文件監聽機制

fis3 release -wd test

match

match()方法

捕獲文件，執行流中的方法.
參數1：獲取的文件
參數2：處理文件的配置信息。

// 尋找js 文件， 放在js文件底下
fis.match('**.js', {
    release: 'js/$0'
});

// 尋找css 文件， 放在css文件底下
fis.match('**.css', {
    release: 'css/$0'
});

globs

fis中globs語法
拓展，咱們能夠將**表示除拓展名之外的任何字符。
對於多個文件類型處理，咱們能夠用{}，經過，實現對多個文件獲取
$0能夠獲取前面匹配的文件

fis.match('**.{js,css}', {
    release: 'public/$0'
});

fis中的插件

使用插件： fis-plugin();方法。
參數1：插件名稱。(須要取出插件前綴)

例如：css壓縮插件是fis-optimizer-clean-css
前綴是：fis-optimizer
名稱： clean-css

須要在match() 的配置參數中使用。

fis.match('project/**.css', {
    
    optimizer: fis.plugin('clean-css')
    
});

配置屬性
packTo ：打包參數屬性
release：是否發佈，$0 捕獲匹配的文件
userHash: 添加戳
userSprite：處理css文件，告知fis3製做精靈圖

css壓縮

css壓縮插件： clean-css

fis.match('project/**.css', {
    
    optimizer: fis.plugin('clean-css')
    
});

js壓縮

js壓縮插件：uglify-js

fis.match('index.js', {
    optimizer: fis.plugin('uglify-js')
});

圖片PNG優化

png圖片優化插件： fis-optimizer-png-comperessor

fis將圖片壓縮內置到包中，只能處理png格式的文件，(png的優化比例最高). fis內置了png格式優化的插件。

fis.match('demo.png', {
    optimizer: fis.plugin('png-compressor')
})

精靈圖

fis實現精靈圖插件：fis-spriter-csssperiter.

找到css中的那些圖片須要製做精靈圖，經過 ?__sprite。這個標識符區分那個圖片須要製做精靈圖。
在fis中配置，說明那些css圖片要作精靈圖處理。 userSprite：true。告知fis，須要製做精靈圖。
精靈圖在流的處理的倒三步，是在打包之後，所以製做過程要再打包過程當中處理。

/* 第一步 */
.item1 span {
    background: url(../img/01.png?__sprite) center no-repeat;
}

// 第二步
fis.match('**.css', {
    'useSprite': true
});

// 第三步
fis.match('::package', {
    'spriter': fis.plugin('csssprites') 
});

::pageage表示某個過程

指紋

爲請求的資源文件後面後綴添加名稱，爲了防止文件更新瀏覽器緩存。

fis.match('**.{js,css,png}', {
    'useHash': true
});

嵌入技術

圖片嵌入

在圖片路徑添加?__inline

<img src="img/02.png?__inline" alt="">

/* 樣式中添加 */
background: url(../img/03.png?__inline) center;

html嵌入資源

HTML模板嵌入，經過link標籤嵌入，rel屬性是import，而且href 模版路徑後添加?__inline
CSS嵌入，經過link引入css,路徑後添加?__inline
JS嵌入，經過script引入JS，路徑後添加?__inline
圖片嵌入，img標籤引入圖片，路徑末尾添加?__inline

<body>

    <!-- HTML模板嵌入 -->
    <link rel="import" type="text/css" href="tpl/tpl.html?__inline" />
    
    <!-- CSS嵌入 -->
    <link rel="stylesheet" type="text/css" href="css/index.css?__inline"/>

    <!-- JS嵌入 -->    
    <script src="js/index.js?__inline" type="text/javascript" charset="utf-8"></script>

</body>

css嵌入資源

嵌入CSS文件，@import 經過設置文件路徑, 在路徑末尾 ?__inline
嵌入圖片 ?__inline

@import url("css.css?__inline");
.item {
    background: url(../img/04.png?__inline) center;
}

js嵌入資源

嵌入JS文件，經過__inline( url ); 方法
嵌入CSS文件，經過__inline( url );
嵌入img ,經過__inline( url );
在JS文件中嵌入JS，CSS，img文件不須要在路徑末尾加?__inline

__inline('demo.js')  // 不須要加分號 ，加分號fis3 會補一個分號，編譯後，會變成兩個分號

var imgSrc = __inline('../img/01.png'); // 編譯後是base64的圖片

var styles = __inline('../css/css.css'); // 編譯後： var styles = "body{background:#0ff}";

打包

fis內置了打包工具，可是有侷限性（引入的原始路徑並不會修改），經過packTo配置.

// 壓縮css
fis.match('**.css', {
    optimizer: fis.plugin('clean-css'),
    packTo: 'css/app.css'
});


// 壓縮js
fis.match('**.js', {
    optimizer: fis.plugin('uglify-js'),
    packTo: 'js/app.js'
});

打包插件：fis3-postpackager-loader。替換內置打包工具中的路徑不會自動修改。

// 修改打包路徑
fis.match('::package', {
    postpackager: fis.plugin('loader')
});

模塊化開發中應用

fis在模塊化開發中應用

fis.hook(). 添加鉤子插件
參數插件名稱

seajs 使用 fis-hook-cmd 插件

在match();中配置 isMod: 表是是否模塊化.

cmd規範

插件:fis-hook-cmd

在模塊化文件中不須要定義模塊，不須要定義define(); 直接經過require();引用須要的須要的模塊便可。fis編譯的時候會經過配置模塊規範自動添加模塊的代碼。

// 配置cmd規範
fis.hook('cmd');

fis.match('js/**.js', {
    isMod: true
});

amd 規範

插件： fis-hook-amd

入口，引入文件方式不一樣。

// 鉤子
fis.hook('amd');
fis.match('js/**.js', {
    isMod: true
});

commonjs

插件：fis-hook-commonjs
mod.js

<!-- 文件須要引入mod.js -->
<script type="text/javascript" src="mod.js"></script>

fis.hook('commonjs');

fis.match('js/**.js', {
    isMod: true,
    packTo: 'js/all.js'
});

相關標籤/搜索

fis

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。