fis3
fis3
?
對于fis的總結好像丟了,再次借鑒官方文檔摘抄和總結一些知識點,以供溫習和記憶
項目根目錄:fis3配置文件(默認fis-conf,js)所在的目錄為項目根目錄。
fis3 release -d ./output? ? 構建發布到項目目錄的output目錄下
fis3 release -d ../dist ? 構建發布到項目父級目錄的dist子目錄下
?
對比發布之后和發布之前的引用路徑,將相對路徑替換成了絕對路徑
?
fis3的構建過程對資源URL進行了替換,替換成了絕對URL,體現了fis一個重要特性:資源定位
?
接著在項目的根目錄執行命令 fis3 release -d ../output發布到../output下,
?
在默認不配置的情況下只是對資源相對路徑修改成了絕對路徑,通過配置文件可以輕松分離開發錄路徑(源碼路徑)與部署路勁。不如我們想讓所有的靜態資源構建后到static目錄下,在fis.conf.js里面進行配置:
fis.match(‘*.{png,js,css},{
release : ‘/static/$0’
}’);
初始化的fis-conf.js如下本身就帶有圖片壓縮的功能的配置
// default settings. fis3 release
?
// Global start
fis.match('*.{js,css}', {
? useHash: true//? 開啟md5戳
});
?
fis.match('::image', {
? useHash: true
});
//js壓縮
fis.match('*.js', {
? optimizer: fis.plugin('uglify-js')
});
//css壓縮
fis.match('*.css', {
? optimizer: fis.plugin('clean-css')
});
//png圖片壓縮
fis.match('*.png', {
? optimizer: fis.plugin('png-compressor')
});
?
// Global end
?
// default media is `dev`
fis.media('dev')
? .match('*', {
? ? useHash: false,
? ? optimizer: null
? });
?
// extends GLOBAL config
fis.media('production');
?
雖然有功能配置,單絲缺少相應的插件依舊不能執行,package.json中并沒有安裝相關的依賴包,壓縮功能,添加md5戳還是無法實現。下面開始添加常用的插件:
安裝方式都是? npm? install? —save-dev? 插件名
1壓縮js:fis-optimizer-uglify-js
2壓縮css:fis-optimizer-clean-css
3壓縮圖片:fis-optimizer-png-compressor
4編譯less: fis-parser-less-2.x
5編譯scss: fis-parse-node-sass
6圖片合并:fis-sriter-csssprites? 除了配置此插件,還有一項重要的事,就是在需要合并的圖片后面加上?__inline
7基于頁面的打包:fis3-postpackager-loader
?
?
?
完整的fis-conf.js如下:
//加 md5
fis.match('*.{js,css,png,gif}', {
? useHash: true // 開啟 md5 戳
});
?
// 啟用 fis-spriter-csssprites 插件
fis.match('::package', {
? spriter: fis.plugin('csssprites')
})
?
// 對 CSS 進行圖片合并
fis.match('/css/*.css', {
? useSprite: true
});
?
//定位資源,將內容發布到release 指向的目錄
fis.match('/js/*.js',{
? ? release:'/static$0'
});
fis.match('*.{css,less}',{
? ? release:'/static$0'
});
fis.match('/images/(*.{png,gif,jpg})', {
? ? //發布到/static/pic/xxx目錄下
? ? release: '/static/pic$0'
});
?
//壓縮
fis.match('*.js', {
? optimizer: fis.plugin('uglify-js')
});
?
fis.match('*.css', {
? optimizer: fis.plugin('clean-css')
});
?
fis.match('*.{png,gif,jpg}', {
? optimizer: fis.plugin('png-compressor'),
? release: '/static/pic$0'
});
?
// less編譯
fis.match('*.less', {
? ? rExt: '.css', // from .less to .css
? ? parser: fis.plugin('less-2.x', {
? ? ? ? // fis-parser-less-2.x option
? ? }),
? ? release:'/static$0'
});
?
//scss編譯
fis.match('*.scss', {
? release:'/static/css$0',
? rExt: '.css',
? parser: fis.plugin('node-sass', {
? ? // options...
? })
});
?
//基于頁面的打包
fis.match('::package', {
? postpackager: fis.plugin('loader', {
? ? allInOne: true
? })
});
?
//發布的時候忽略以下目錄或文件
fis.set('project.ignore', [
? 'output/**',
? 'node_modules/**',
? '.git/**',
? '.svn/**',
? 'package.json'
]);
?
//設置默認發布的路徑,適用于使用自己的服務器替代內置Server,一般沒必要
//fis3-deploy-local-deliver
// fis.match('*', {
// ? deploy: fis.plugin('local-deliver', {
// ? ? to: '/Users/lee/Desktop/output'
// ? })
// })
?
// default media is `dev`
fis.media('dev')
? .match('*', {
? ? useHash: false,
? ? optimizer: null
? });
?
// extends GLOBAL config
fis.media('prod');
轉載于:https://www.cnblogs.com/wyliunan/p/8832010.html
總結
- 上一篇: 计蒜客 百度地图的实时路况
- 下一篇: HNOI2018酱油记