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

總結

以上是生活随笔為你收集整理的fis3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。