利用fis3構建前端項目工程
[TOC]
FIS3是國內百度公司產出的一款前端工程構建工具厢岂，F(xiàn)IS3可以解決前端工程中性能優(yōu)化、資源加載（異步楚堤、同步疫蔓、按需、預加載身冬、依賴管理衅胀、合并、內嵌）酥筝、模塊化開發(fā)滚躯、自動化工具、開發(fā)規(guī)范嘿歌、代碼部署等問題掸掏，首先來簡單的實現(xiàn)資源合并壓縮提高性能等問題。
1.安裝node.js和npm
打開官網 https://nodejs.org
Paste_Image.png
點擊安裝穩(wěn)定版本宙帝，node新版已經集成npm丧凤。
查看是否安裝node
node -v
查看是否安裝
npm -v
如果有安裝會顯示具體版本號
比如:
Paste_Image.png
2.安裝fix3
npm install -g fis3
安裝成功：
Paste_Image.png
3.配置命令及作用
- 添加時間戳，解決緩存步脓。
fis.match('*.{js,css,png}', {
useHash: true
});
- 啟用 fis-spriter-csssprites 插件愿待，給匹配到的文件分配屬性 useSprite
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
fis.match('*.css', {
useSprite: true
});
FIS3 構建會對 CSS 中，路徑帶 ?__sprite 的圖片進行合并靴患。為了節(jié)省編譯的時間仍侥，分配到 useSprite: true 的 CSS 文件才會被處理，所有需要合并的圖片路徑需帶?_sprite蚁廓，如下：
.first_icon::before {
background: url("../img/first_icon.png?__sprite");
}
.second_icon::before {
background: url("../img/second_icon.png?__sprite");
}
- 圖片壓縮 fis-optimizer-png-compressor 插件進行壓縮访圃，已內置
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
});
- 對css壓縮，fis-optimizer-clean-css 插件進行壓縮相嵌，已內置
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
});
- 對js壓縮腿时，利用fis-optimizer-uglify-js 插件進行壓縮，已內置
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
- 啟用fis3-hook-relative插件饭宾，并讓所有文件支持相對路徑批糟，如果使用絕對路徑，可注釋啟用fis3-hook-relative插件看铆。
fis.hook('relative');
fis.match('**', {
relative: true
});
- 對多個頁面徽鼎，散列文件進行合并，需安裝 fis3-postpackager-loader
fis.match('::packager', {
postpackager: fis.plugin('loader', {
allInOne: true
})
});
- 指定構建存放路徑
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
4.開始構建項目
(1)在項目目錄里新建一個配置文件fis-conf.js
配置如下：
//啟用fis3-hook-relative插件
fis.hook('relative');
//讓所有文件，都使用相對路徑
fis.match('**', {
relative: true
});
// 加md5戳
fis.match('*.{js,css,png}', {
useHash: true
});
//啟用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
});
//對CSS進行圖片合并 給匹配到的文件分配屬性 `useSprite`
fis.match('*.css', {
useSprite: true
});
//圖片壓縮 fis-optimizer-png-compressor 插件進行壓縮否淤，已內置
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
});
//js壓縮 fis-optimizer-uglify-js 插件進行壓縮悄但，已內置
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
//css壓縮 fis-optimizer-clean-css 插件進行壓縮，已內置
fis.match('*.css', {
optimizer: fis.plugin('clean-css')
});
//可對頁面散列文件進行合并石抡，需安裝 fis3-postpackager-loader
fis.match('::packager', {
postpackager: fis.plugin('loader', {
allInOne: true
})
});
//配置文件指定路徑位置
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
(2)開始構建
進入項目根目錄檐嚣，執(zhí)行命令，進行構建啰扛。
構建發(fā)布到項目目錄的dist目錄下
fis3 release -d ./dist
構建發(fā)布到項目父級目錄的dist子目錄下
fis3 release -d ../dist
發(fā)布到其他盤（Windows）
fis3 release -d F:\dist
參考網址：
http://fis.baidu.com/
