FIS

mdluo 發(fā)布于2019-08-21 10:54 / 896人閱讀

摘要：執(zhí)行這個指令，對項目進行發(fā)布。尋找文件，放在文件底下尋找文件，放在文件底下中語法拓展，我們可以將表示除拓展名以外的任何字符。告知，需要制作精靈圖。替換內(nèi)置打包工具中的路徑不會自動修改。配置規(guī)范規(guī)范插件入口，引入文件方式不同。

Fis簡介

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

fis 是基于流的處理，fis有自己的一個流處理過程：

lint：代碼規(guī)范

parser：代碼編譯

perprocessor：前置處理

standard：代碼標(biāo)準(zhǔn)化

protprocessor：后置處理

optimizer：優(yōu)化處理

perpackager：前置打包

packager：打包過程

spriter：圖片制作精靈圖

postpackager：后置打包

deploy: 發(fā)布

fis-conf

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

release

release指令

發(fā)布。執(zhí)行這個指令，對項目進行發(fā)布。
參數(shù)： -d 發(fā)布到某個目錄下，后面加上目錄的名稱，這個目錄相對于fis-conf這個文件.

fis3 release -d test

文件監(jiān)聽機制

fis3 release -wd test

match

match()方法

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

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

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

globs

fis中g(shù)lobs語法
拓展，我們可以將**表示除拓展名以外的任何字符。
對于多個文件類型處理，我們可以用{}，通過，實現(xiàn)對多個文件獲取
$0可以獲取前面匹配的文件

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

fis中的插件

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

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

需要在match() 的配置參數(shù)中使用。

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

配置屬性
packTo ：打包參數(shù)屬性
release：是否發(fā)布，$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優(yōu)化

png圖片優(yōu)化插件： fis-optimizer-png-comperessor

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

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

精靈圖

fis實現(xiàn)精靈圖插件：fis-spriter-csssperiter.

找到css中的那些圖片需要制作精靈圖，通過 ?__sprite。這個標(biāo)識符區(qū)分那個圖片需要制作精靈圖。

在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
});

嵌入技術(shù) 圖片嵌入

在圖片路徑添加?__inline

css嵌入資源

嵌入CSS文件，@import 通過設(shè)置文件路徑, 在路徑末尾 ?__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內(nèi)置了打包工具，但是有局限性（引入的原始路徑并不會修改），通過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。替換內(nèi)置打包工具中的路徑不會自動修改。

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

模塊化開發(fā)中應(yīng)用

fis在模塊化開發(fā)中應(yīng)用

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

seajs 使用 fis-hook-cmd 插件

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

cmd規(guī)范

插件:fis-hook-cmd

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

// 配置cmd規(guī)范
fis.hook("cmd");

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

amd 規(guī)范

插件： fis-hook-amd

入口，引入文件方式不同。

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

commonjs

插件：fis-hook-commonjs
mod.js

fis.hook("commonjs");

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86393.html

發(fā)表評論

登陸后可評論

0條評論

mdluo

男|高級講師

我要關(guān)注我要私信

TA的文章

虛擬主機月流量是什么意思-虛擬主機月流量是指什么？

閱讀 1494·2021-09-22 16:04
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

閱讀 2832·2019-08-30 15:44
行業(yè)log | 小程序搭載智慧零售，實現(xiàn)五位一體數(shù)字化營銷

閱讀 919·2019-08-30 15:43
網(wǎng)絡(luò)篇—瀏覽器緩存（一）

閱讀 797·2019-08-29 15:24
關(guān)于 jqeury easyui

閱讀 1878·2019-08-29 14:07
css字體相關(guān)樣式的處理

閱讀 1170·2019-08-29 12:30
使用 @font-face

閱讀 1761·2019-08-29 11:15
flexbox：更加優(yōu)雅的Web布局

閱讀 2773·2019-08-28 18:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

FIS

相關(guān)文章

Java編程基礎(chǔ)21——IO(字節(jié)流)

IO字節(jié)流8,9InputStream以及輸入流讀取字節(jié)數(shù)據(jù)

**前端開發(fā)手札fis篇——關(guān)于部署目錄的問題**

1、字節(jié)流 2、字符流

Java編程基礎(chǔ)23——IO(其他流)&Properties

發(fā)表評論

0條評論

mdluo

男|高級講師

TA的文章

虛擬主機月流量是什么意思-虛擬主機月流量是指什么？

前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

行業(yè)log | 小程序搭載智慧零售，實現(xiàn)五位一體數(shù)字化營銷

網(wǎng)絡(luò)篇—瀏覽器緩存（一）

關(guān)于 jqeury easyui

css字體相關(guān)樣式的處理

使用 @font-face

flexbox：更加優(yōu)雅的Web布局

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

FIS

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！