百度出品,說是能夠解決前端開發(fā)過程中遇到的很多麻煩的事情,讓重復(fù)的工作變簡單.感覺上是一個整合的開發(fā)環(huán)境,具體等試了再說
由于本文類似總結(jié)筆記 內(nèi)容趨向言簡意賅,方便日后快速翻查,要詳細資料請看最上面的官方手冊
介紹
FIS3 , 為你定制的前端工程構(gòu)建工具
解決前端開發(fā)中自動化工具蜕青、性能優(yōu)化荷荤、模塊化框架腥沽、開發(fā)規(guī)范儒溉、代碼部署、開發(fā)流程等問題
安裝
需要有nodejs https://nodejs.org
npm install -g fis3
很僵硬,我的node是最新7.3.0,而官方?jīng)]有支持,查看支持的地址
命令行的卸載失敗了,可能由于我是windows nodejs也是安裝包安裝的,所以還是老老實實去控制面板卸載吧,然后下了一個長期支持版本6.9.4的nodejs
下了半天沒下載下來,最后還是用cnpm下載的
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g fis3
升級
npm update -g fis3
重裝
npm install -g fis3
功能點
1.資源定位能力
使用fis3 release -d ./output命令構(gòu)建的項目會自動生成對應(yīng)的絕對路徑,開發(fā)過程中只需要寫相對路徑
需要注意的是,在網(wǎng)頁中的絕對路徑是相對于文件根目錄對應(yīng)到網(wǎng)站域名,如果項目不在根目錄下 這個發(fā)布出來的絕對路徑反而會出問題
修改fis-conf.js 文件可以修改對應(yīng)文件架構(gòu)后存放的位置,哪怕一開始亂放,最后也會合并到一個文件夾下,保留原目錄結(jié)構(gòu)
js如果有用到地址修改,就爆炸了
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
2.css js發(fā)布時壓縮
// 清除其他配置凯正，只保留如下配置
fis.match('*.js', {
// fis-optimizer-uglify-js 插件進行壓縮宝鼓，已內(nèi)置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
// fis-optimizer-clean-css 插件進行壓縮轩性，已內(nèi)置
optimizer: fis.plugin('clean-css')
});
fis.match('*.png', {
// fis-optimizer-png-compressor 插件進行壓縮，已內(nèi)置
optimizer: fis.plugin('png-compressor')
});
3.文件資源添加指紋,對 js格遭、css、png 圖片引用 URL 添加 md5 戳
特別說明,如果js中切換圖片 最好不要用這個
fis.match('*.{js,css,png}', {
useHash: true
});
4.雪碧圖 CssSprite圖片合并
以前雪碧圖都是自己ps合并 現(xiàn)在不用了...自動合成圖片并修改對應(yīng)css,不過需要注意 需要處理的圖片 后面要加上"?__sprite". 詳細配置
如:
li.list-1::before { background-image: url('./img/list-1.png?__sprite');}
// 啟用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 對 CSS 進行圖片合并
fis.match('*.css', {
// 給匹配到的文件分配屬性 `useSprite`
useSprite: true
});
5.整合版本
我們學(xué)習(xí)了如何用 FIS3 做壓縮留瞳、文件指紋拒迅、圖片合并、資源定位她倘，現(xiàn)在把這些功能組合起來璧微，配置文件如下；
// 加 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 插件進行壓縮硬梁，已內(nèi)置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
// fis-optimizer-clean-css 插件進行壓縮前硫，已內(nèi)置
optimizer: fis.plugin('clean-css')
});
fis.match('*.png', {
// fis-optimizer-png-compressor 插件進行壓縮，已內(nèi)置
optimizer: fis.plugin('png-compressor')
});
fis.media('debug').match('*.{js,css,png}', {
useHash: false,
useSprite: false,
optimizer: null
})
發(fā)布的時候用,不壓縮:
fis3 release -d ../output
開發(fā)的時候用下面的荧止；
fis3 release debug -d ../output
調(diào)試
1.打開www目錄
fis3 server open
2.發(fā)布
fis3 release debug
3.啟動
fis3 server start
4.修改端口號
fis3 server -h
5.文件監(jiān)聽
fis3 release -w
6.常用,修改了文件以后,調(diào)試服務(wù)器的文件也會相應(yīng)修改并自動刷新瀏覽器
fis3 release -wL
7.LESS使用
安裝插件,推薦用cnpm
npm install -g fis-parser-less
修改配置js,加入
fis.match('*.less', {
// fis-parser-less 插件進行解析
parser: fis.plugin('less'),
// .less 文件后綴構(gòu)建后被改成 .css 文件
rExt: '.css'
})
8.html 壓縮
安裝插件
cnpm install -g fis-optimizer-html-compress
修改配置文件
fis.match('*.html', {
optimizer: fis.plugin('html-compress')
})
問題
1.如果給圖片添加md5 戳 那每次發(fā)布 舊的文件不會被覆蓋 豈不是每次要刪除,再發(fā)布?
2.同樣是md5戳的問題,加了以后 我的js如果切換圖片 就失效了
3.為什么有的圖片加了md5戳 而有的圖片沒有?
