FIS3 是面向前端的工程構(gòu)建工具语稠。解決前端工程中性能優(yōu)化、資源加載(異步弄砍、同步颅筋、按需、預(yù)加載输枯、依賴管理、合并占贫、內(nèi)嵌)桃熄、模塊化開發(fā)、自動化工具、開發(fā)規(guī)范瞳收、代碼部署等問題碉京。
FIS的安裝
打開命令框輸入下列代碼。
sudo npm install -g fis3
安裝過程大概需要十到十五分鐘螟深,判斷是否安裝成功谐宙,在命令框輸入:sudo fis3 -v
然后在CMD里面是這樣的提示
如果需要升級fis3
sudo npm update -g fis3
如果重新安裝fis3
sudo npm install -g fis3
構(gòu)建FIS3 的構(gòu)建不會修改源碼,而是會通過用戶設(shè)置界弧,將構(gòu)建結(jié)果輸出到指定的目錄凡蜻。
進入項目根目錄,執(zhí)行命令垢箕,進行構(gòu)建划栓。
項目根目錄:FIS3 配置文件(默認fis-conf.js)所在的目錄為項目根目錄。
構(gòu)建發(fā)布到項目目錄的 output目錄下
sudo fis3 release -d ./output
構(gòu)建發(fā)布到項目父級目錄的 dist子目錄下
sudo fis3 release -d ../output
資源定位:我們在項目根目錄執(zhí)行命令 fis3 release -d ../output發(fā)布到目錄 ../output下然后通過 atom 工具查看源碼和構(gòu)建結(jié)果的內(nèi)容變化条获。
如上忠荞,構(gòu)建過程中對資源 URI 進行了替換,替換成了絕對 URL帅掘。通俗點講就是相對路徑換成了絕對路徑委煤。
這是一個 FIS 的很重要的特性,資源定位修档。資源定位能力碧绞,可以有效地分離開發(fā)路徑與部署路徑之間的關(guān)系,工程師不再關(guān)心資源部署到線上之后去了哪里萍悴,變成了什么名字头遭,這些都可以通過配置來指定。而工程師只需要使用相對路徑來定位自己的開發(fā)資源即可癣诱。這樣的好處是 資源可以發(fā)布到任何靜態(tài)資源服務(wù)器的任何路徑上计维,而不用擔心線上運行時找不到它們,而且代碼 具有很強的可移植性撕予,甚至可以從一個產(chǎn)品線移植到另一個產(chǎn)品線而不用擔心線上部署不一致的問題鲫惶。
我們在對我們的資源進行壓縮的時候只有這種是內(nèi)置的插件;
fis-optimizer-uglify-js
fis-optimizer-clean-css
fis-optimizer-png-compressor
我們不需要安裝這些插件我在根目錄里面放了其它的壓縮代碼的方式, 如果有需要就安裝下列插件实抡,安裝之后才能使用欠母。
//對.less壓縮成css
sudo npm install -g fis-parser-less
//css 文件啟動圖片合并功能
sudo npm install -g fis3-postpackager-loader
// 對html進行壓縮
sudo npm install -g fis-optimizer-html-minifier
可能有時候開發(fā)的時候不需要壓縮、合并圖片吆寨、也不需要 hash赏淌。那么給上面配置追加如下配置
fis.media('debug').match('*.{js,css,png}', {
useHash: false,
useSprite: false,
optimizer: null
})
這樣我們的壓縮打包文件 就配置好啦;調(diào)試目錄構(gòu)建時不指定輸出目錄啄清,即不指定 -d 參數(shù)時六水,構(gòu)建結(jié)果被發(fā)送到內(nèi)置 Web Server 的根目錄下。此目錄可以通過執(zhí)行以下命令打開。
sudo fis3 server open
發(fā)布
sudo fis3 release
不加 -d參數(shù)默認被發(fā)布到內(nèi)置 Web Server的根目錄下掷贾,當啟動服務(wù)時訪問此目錄下的資源睛榄。
啟動
sudo fis3 server start
來啟動本地 Web Server,當此 Server 啟動后想帅,會自動瀏覽器打開 http://127.0.0.1:8080场靴,默認監(jiān)聽端口 8080通過執(zhí)行以下命令得到更多啟動參數(shù),可以設(shè)置不同的端口號(當 8080 占用時)
sudo fis3 server -h
瀏覽器自動刷新
sudo fis3 release -wL