FIS

mdluo 發布于2019-08-21 10:54 / 866人閱讀

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

Fis簡介

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

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

lint：代碼規范

parser：代碼編譯

perprocessor：前置處理

standard：代碼標準化

protprocessor：后置處理

optimizer：優化處理

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

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

fis.hook("commonjs");

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86393.html

Java編程基礎21——IO(字節流)

摘要：流按操作類型分為兩種字節流字節流可以操作任何數據因為在計算機中任何數據都是以字節的形式存儲的字符流字符流只能操作純字符數據，比較方便。 1_IO流概述及其分類 1.概念 IO流用來處理設備之間的數據傳輸 Java對數據的操作是通過流的方式 Java用于操作流的類都在IO包中流按流向分為兩種：輸入流，輸出流。流按操作類型分為兩種：字節流 : 字節流可以操作任何數據,因為在...

yanbingyun1990 2019-08-19 11:16 評論0 收藏0
IO字節流8,9InputStream以及輸入流讀取字節數據

摘要：字節輸入流此抽象類是表示字節輸入流的所有類的超類。定義了所有子類共性的方法從輸入流中讀取數據的下一個字節。從輸入流中讀取一定數量的字節，并將其存儲在緩沖區數組中。關閉此輸入流并釋放與該流關聯的所有系統資源。 package com.itheima.demo02.InputStream; import java.io.FileInputStream;import java.io.IOEx...

wmui 2019-08-19 10:31 評論0 收藏0
前端開發手札fis篇——關于部署目錄的問題

摘要：部署問題由于部署生成的文件路徑是網站目錄根開始的如，導致網站發布必須是目錄根才能有效加載。這是怎樣處理更方便呢解決方法可以使用替換腳本腳本，會搜著目錄下的所有文件并在開頭的路徑前面添加參數。用了差不多一年多的fis，感覺他比其他構建工具更容易上手，擴展插件也比較多。但是詬病也是有的，比如接下來要說的部署問題，雖然fis3本身也有比較好的方案解決（設置url參數），但是對于部署不是給內...

goji 2019-08-20 10:24 評論0 收藏0
1、字節流 2、字符流

摘要：用兩個字節表示。兩個字節第一個字節是負數第二個字節可能是正數目前最常用的中文碼表，萬的中文和符號。用兩個字節表示，其中的一部分文字，第一個字節開頭是，第二字節開頭是最新的中文碼表，目前還沒有正式使用。 01輸入和輸出 * A:輸入和輸出 * a: 參照物 * 到底是輸入還是輸出，都是以Java程序為參照 * b: Output * 把內存...

asoren 2019-08-14 18:40 評論0 收藏0
Java編程基礎23——IO(其他流)&Properties

摘要：但它融合了和的功能。支持對隨機訪問文件的讀取和寫入。的概述和作為集合的使用了解的概述類表示了一個持久的屬性集。可保存在流中或從流中加載。屬性列表中每個鍵及其對應值都是一個字符串。 1_序列流(了解) 1.什么是序列流序列流可以把多個字節輸入流整合成一個, 從序列流中讀取數據時, 將從被整合的第一個流開始讀, 讀完一個之后繼續讀第二個, 以此類推. 2.使用方式整合兩個: S...

vvpale 2019-08-19 11:16 評論0 收藏0