當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

FIS

發(fā)布時間：2023/12/20 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 FIS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Fis簡介

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

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

lint：代碼規(guī)范
parser：代碼編譯
perprocessor：前置處理
standard：代碼標準化
protprocessor：后置處理
optimizer：優(yōu)化處理
perpackager：前置打包
packager：打包過程
spriter：圖片制作精靈圖
postpackager：后置打包
deploy: 發(fā)布

fis-conf

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

release

release指令

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

fis3 release -d test

文件監(jiān)聽機制

fis3 release -wd test

match

match()方法

捕獲文件，執(zhí)行流中的方法.
參數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：是否發(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將圖片壓縮內置到包中，只能處理png格式的文件，(png的優(yōu)化比例最高). fis內置了png格式優(yōu)化的插件。

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

精靈圖

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

找到css中的那些圖片需要制作精靈圖，通過 ?__sprite。這個標識符區(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 });

嵌入技術

圖片嵌入

在圖片路徑添加?__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

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

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

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

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

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

<script type="text/javascript" src="mod.js"></script>

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

總結

以上是生活随笔為你收集整理的FIS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SpringMVC自定义视图 Excel
下一篇： -Dmaven.multiModuleP