構建

由 fis3-command-release 插件提供構建能力

FIS3 的構建不會修改源碼，而是會通過用戶設置，將構建結果輸出到指定的目錄。

例子

在正式介紹 FIS3 功能之前，我們給定一個簡單的例子，例子下載地址 demo-simple

命令

進入項目根目錄，執行命令，進行構建。

項目根目錄：FIS3 配置文件(默認fis-conf.js)所在的目錄為項目根目錄。

fis3 release -d

任意目錄

fis3 release -h 獲取更多參數

構建發布到項目目錄的 output 目錄下fis3 release -d ./output

構建發布到項目父級目錄的 dist 子目錄下fis3 release -d ../dist

發布到其他盤 (Windows)fis3 release -d D:\output

資源定位

我們在項目根目錄執行命令 fis3 release -d ../output 發布到目錄 ../output 下。然后通過 diff 工具查看源碼和構建結果的內容變化。

文件變化

index.html、style.css 發生了變化

index.html

style.css

如上，構建過程中對資源 URI 進行了替換，替換成了絕對 URL。通俗點講就是相對路徑換成了絕對路徑。

這是一個 FIS 的很重要的特性，

資源定位能力，可以有效地分離開發路徑與部署路徑之間的關系，工程師不再關心資源部署到線上之后去了哪里，變成了什么名字，這些都可以通過配置來指定。而工程師只需要使用相對路徑來定位自己的開發資源即可。這樣的好處是 資源可以發布到任何靜態資源服務器的任何路徑上，而不用擔心線上運行時找不到它們，而且代碼 具有很強的可移植性，甚至可以從一個產品線移植到另一個產品線而不用擔心線上部署不一致的問題。

在默認不配置的情況下只是對資源相對路徑修改成了絕對路徑。通過配置文件可以輕松分離開發路徑(源碼路徑)與部署路徑。比如我們想讓所有的靜態資源構建后到 static 目錄下。

// 配置配置文件，注意，清空所有的配置，只留下以下代碼即可。

fis.match('*.{png,js,css}', {

release: '/static/$0'

});

同樣構建到 ../output 目錄下看變化。

fis3 release -d ../output

以上示例只是更改部署路徑，還可以給 url 添加 CDN domain 或者添加文件指紋(時間戳或者md5戳)。

再次強調，FIS3 的構建是不會對源碼做修改的，而是構建產出到了另外一個目錄，并且構建的結果才是用來上線使用的。

可能有人會疑惑，修改成了絕對路徑，本地如何調試開發？下一節介紹調試的方法。

配置文件

默認配置文件為 fis-conf.js，FIS3 編譯的整個流程都是通過配置來控制的。FIS3 定義了一種類似 CSS 的配置方式。固化了構建流程，讓工程構建變得簡單。

fis.match()

首先介紹設置規則的配置接口

fis.match(selector, props);

selector ：FIS3 把匹配文件路徑的路徑作為selector，匹配到的文件會分配給它設置的 props。關于 selector 語法，請參看 Glob 說明

props ：編譯規則屬性，包括文件屬性和插件屬性，更多屬性

我們修改例子的配置文件 fis-conf.js，添加以下內容

fis.match('*.js', {

useHash: false

});

fis.match('*.css', {

useHash: false

});

fis.match('*.png', {

useHash: false

});

重要特性

規則覆蓋

假設有兩條規則 A 和 B，它倆同時命中了文件 test.js，如果 A 在 B 前面，B 的屬性會覆蓋 A 的同名屬性。不同名屬性追加到 test.js 的 File 對象上。

// A

fis.match('*', {

release: '/dist/$0'

});

// B

fis.match('test.js', {

useHash: true,

release: '/dist/js/$0'

})

那么 test.js 分配到的屬性

{

useHash: true, // B

release: '/dist/js/$0' // B

}

fis.media()

fis.media() 接口提供多種狀態功能，比如有些配置是僅供開發環境下使用，有些則是僅供生產環境使用的。

fis.match('*', {

useHash: false

});

fis.media('prod').match('*.js', {

optimizer: fis.plugin('uglify-js')

});

fis3 release

配置的 media 值

fis3 release prod

編譯時使用 prod 指定的編譯配置，即對 js 進行壓縮。

如上，fis.media() 可以使配置文件變為多份(多個狀態，一個狀態一份配置)。

fis.media('rd').match('*', {

deploy: fis.plugin('http-push', {

receiver: 'http://remote-rd-host/receiver.php'

})

});

fis.media('qa').match('*', {

deploy: fis.plugin('http-push', {

receiver: 'http://remote-qa-host/receiver.php'

})

});

fis3 release rd push 到 RD 的遠端機器上

fis3 release qa push 到 QA 的遠端機器上

media dev 已經被占用，默認情況下不加 參數時默認為 dev

我們執行 fis3 inspect 來查看文件命中屬性的情況。fis3 inspect 是一個非常重要的命令，可以查看文件分配到的屬性，這些屬性決定了文件將如何被編譯處理。

~/app.js

-- useHash false `*.js` (0th)~/img/list-1.png

-- useHash false `*.png` (2th)~/img/list-2.png

-- useHash false `*.png` (2th)~/img/logo.png

-- useHash false `*.png` (2th)~/style.css

-- useHash false `*.css` (1th)~::package

-- empty

fis3 inspect 查看特定 media 的分配情況

更多信息

文件指紋

文件指紋，唯一標識一個文件。在開啟強緩存的情況下，如果文件的 URL 不發生變化，無法刷新瀏覽器緩存。一般都需要通過一些手段來強刷緩存，一種方式是添加時間戳，每次上線更新文件，給這個資源文件的 URL 添加上時間戳。

而 FIS3 選擇的是添加 MD5 戳，直接修改文件的 URL，而不是在其后添加 query。

對 js、css、png 圖片引用 URL 添加 md5 戳，配置如下；

//清除其他配置，只剩下如下配置

fis.match('*.{js,css,png}', {

useHash: true

});

構建到 ../output 目錄下看變化。

fis3 release -d ../output

文件變化

構建出的文件攜帶了 md5 戳

文件變化

對應 url 也帶上了 md5 戳

片段編譯

有些插件會對文件中的一部分先進行片段編譯fis.compile.partial, 這時可以對相應的片段編譯配置對應的規則。

// vue組件中的less片段處理

fis.match('src/vue/**.vue:less', {

rExt: 'css',

parser: fis.plugin('less'),

release: 'xxx' // 這個無效

});

// 注意：因為組件中的樣式片段編譯只是編譯內容，所以上面的release配置是無效的。要配置其release，需要針對生成的css文件：

fis.match('src/vue/(**.css)', {

release: '/vue-style/$1'

});

壓縮資源

為了減少資源網絡傳輸的大小，通過壓縮器對 js、css、圖片進行壓縮是一直以來前端工程優化的選擇。在 FIS3 中這個過程非常簡單，通過給文件配置壓縮器即可。

// 清除其他配置，只保留如下配置

fis.match('*.js', {

// fis-optimizer-uglify-js 插件進行壓縮，已內置

optimizer: fis.plugin('uglify-js')

});

fis.match('*.css', {

// fis-optimizer-clean-css 插件進行壓縮，已內置

optimizer: fis.plugin('clean-css')

});

fis.match('*.png', {

// fis-optimizer-png-compressor 插件進行壓縮，已內置

optimizer: fis.plugin('png-compressor')

});

構建到 ../output 目錄下看變化。

fis3 release -d ../output

查看 ../output 目錄下已經被壓縮過的結果。

CssSprite圖片合并

壓縮了靜態資源，我們還可以對圖片進行合并，來減少請求數量。

FIS3 提供了比較簡易、使用方便的圖片合并工具。通過配置即可調用此工具并對資源進行合并。

FIS3 構建會對 CSS 中，路徑帶 ?__sprite 的圖片進行合并。為了節省編譯的時間，分配到 useSprite: true 的 CSS 文件才會被處理。

默認情況下，對打包 css 文件啟動圖片合并功能。

li.list-1::before {

background-image:url('./img/list-1.png?__sprite');

}

li.list-2::before {

background-image:url('./img/list-2.png?__sprite');

}

// 啟用 fis-spriter-csssprites 插件

fis.match('::package', {

spriter: fis.plugin('csssprites')

})

// 對 CSS 進行圖片合并

fis.match('*.css', {

// 給匹配到的文件分配屬性 `useSprite`

useSprite: true

});

功能組合

我們學習了如何用 FIS3 做壓縮、文件指紋、圖片合并、資源定位，現在把這些功能組合起來，配置文件如下；

// 加 md5

fis.match('*.{js,css,png}', {

useHash: true

});

// 啟用 fis-spriter-csssprites 插件

fis.match('::package', {

spriter: fis.plugin('csssprites')

});

// 對 CSS 進行圖片合并

fis.match('*.css', {

// 給匹配到的文件分配屬性 `useSprite`

useSprite: true

});

fis.match('*.js', {

// fis-optimizer-uglify-js 插件進行壓縮，已內置

optimizer: fis.plugin('uglify-js')

});

fis.match('*.css', {

// fis-optimizer-clean-css 插件進行壓縮，已內置

optimizer: fis.plugin('clean-css')

});

fis.match('*.png', {

// fis-optimizer-png-compressor 插件進行壓縮，已內置

optimizer: fis.plugin('png-compressor')

});

fis3 release 時添加 md5、靜態資源壓縮、css 文件引用圖片進行合并

可能有時候開發的時候不需要壓縮、合并圖片、也不需要 hash。那么給上面配置追加如下配置；

fis.media('debug').match('*.{js,css,png}', {

useHash: false,

useSprite: false,

optimizer: null

})

fis3 release debug 啟用 media debug 的配置，覆蓋上面的配置，把諸多功能關掉。

總結

以上是生活随笔為你收集整理的fis3 php cgi,FIS3 : 构建的全部內容，希望文章能夠幫你解決所遇到的問題。

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