Fis3項目
項目目錄結構:
E:.
│ .gitignore
│ fis-conf.js
│ index.html
│ package.json
│ README.md
│
├─material
│
└─resource
├─css
├─images
└─js
├─lab
│ │
│ └─until
└─ui
項目要求:
1.雪碧圖
2.代碼模塊化
3.預處理
4.md5戳
5.壓縮資源
雪碧圖
啟用雪碧圖插件,fis3已內置
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
設置雪碧圖的合並格式
fis.config.set('settings.spriter.csssprites', {
margin: 10, //圖之間的邊距
layout: 'matrix' //使用矩陣排列方式，默認為線性`linear`
});
預處理
因為使用的是less，所以需要預處理less文件
通過fis-parser-less插件可以處理
安裝npm install -g fis-parser-less
fis.match('*.less', {
parser: fis.plugin('less'),
rExt: '.css'
})
代碼模塊化
Mod.js
我這里使用的Mode.js,這個百度開發的一個獨立的模塊化庫。
包裹JS
除了mode.js以外我們還需要npm install -g fis-hook-commonjs來安裝一個模塊化"包裹"庫。
它的作用就是將我們的js代碼外面包裹一層,比如我們常用的:jquery.lazyload
通過fis-hook-commonjs包裹后：
define('resource/js/lab/jquery.lazyload', function(require, exports, module) {
//jquery.lazyload代碼
});
然后通過require('resource/js/lab/jquery.lazyload')這種形式就可以加載我們需要的庫了。
設置是否包裹
當然這里我們可以通過fis-conf.js來控制需要包裹的js。
//指定目錄文件進行define包裹
fis.match('/resource/js/lab/**.js', {
isMod: true
})
通過isMode這個屬性即可，true意為包裹，false意為不包裹。
添加別名(謹慎使用)
當然常用的jquery的話，我們可以通過下面這種設置來添加別名等。
fis.hook('commonjs')
.match('/resource/js/lab/jquery.js', {
id: 'jquery'
})
調用var $=require('jquery')
控制打包順序
//設置mod.js的優先級在打包文件的第一位
fis.match('/resource/js/lab/mod.js', {
packOrder: -100
})
這里是通過packOrder來處理打包的順序，值越小打包越靠前。-100比-99靠前。
資源合並
資源合並是我們常用的功能，這里我通過安裝npm install fis3-postpackager-loader這個庫來處理靜態文件文件的資源配置。
他會對頁面的js,css進行掃描，處理我們需要的文件。
比如我們不想將jquery文件合並，我們可以在html頁面中這么處理。
<script type="text/javascript" src="../resource/js/lab/until/interactive.js"></script><!--ignore-->
添加<!--ignore-->這個標記即可。
這樣頁面的這個文件就不會被處理了。
啟用fis3-postpackager-loader
fis.match('::package', {
postpackager: fis.plugin('loader')
});
我們的html文件會引入多個js，css。這樣的話我們會將他們合並成單個文件，提高性能。
<script type="text/javascript" src="../resource/js/lab/until/interactive.js"></script>
<script type="text/javascript" src="../resource/js/lab/until/tabchange.js"></script>
<script type="text/javascript" src="../resource/js/ui/swip.js"></script>
<script type="text/javascript" src="../resource/js/ui/tab.js"></script>
<script type="text/javascript" src="../resource/js/ui/main.js"></script>
通過下面配置處理
//靜態資源加載器配置 npm install fis3-postpackager-loader
//不想加載的引入資源使用<!--ignore-->標記
//合並頁面js
//不進行任何配置 css,js的合並使用fis的pack
fis.match('::package', {
postpackager: fis.plugin('loader')
});
//對合並的aio.css進行處理 打包的會自動進行csssprites
fis.config.set('pack', {
'/static/js/index_aio.js': [
'**.js'
],
'/static/css/index_aio.css': [
'**.css',
'**.less'
]
});
這樣處理打包后的static目錄下情況:
├─css
│ index_aio.css
│ index_aio_z.png
│
└─js
index_aio.js
md5戳
給js,css添加md5戳，使用useHash
fis.media('prod')
.match('/static/**.{css,js}', {
useHash: true
})
壓縮資源
fis.media('prod')
.match('/resource/**.js', {
optimizer: fis.plugin('uglify-js')
})
.match('/resource/**.{css,less}', {
optimizer: fis.plugin('clean-css')
})
.match('/static/**.png', {
optimizer: fis.plugin('png-compressor')
})
將js,css,png進行壓縮。壓縮器fis3已內置,不需要安裝庫。
最后
注意fis3的配置文件中的操作順序會影響你需要的結果