先講一下fis項目的目錄結構
>config --fis依賴表
>page --頁面模板
>static --靜態文件
>test –-mock數據
>widget --項目公共組件
>.gitignore --git忽略提交規則
>build.sh --jenkins上線配置文件
>debug.log --調試程序的日志
>fis-conf,js --fis配置文件
>replace.sed --FE項目中有一些公共模塊像是common和mcommon,這個文件可以隱射公共模塊,達到其他項目使用公共模塊的目的
>server.conf --啟動本地服務指針(包括模板和moke數據)
fis的三大特性
>資源定位
資源定位能力,可以有效的分離開發路徑與部署路徑之間的關系。工程師只需要使用相對路徑來定位自己的開發資源即可,構建過程中對資源 URI 進行了替換,替換成了絕對 URL。這樣工程師就不用擔心上線后資源路徑問題,而且可移植性很高。
>內容嵌入
嵌入資源即內容嵌入,可以為工程師提供諸如圖片base64嵌入到css、js里,前端模板編譯到js文件中,將js、css、html拆分成幾個文件最后合並到一起的能力。這樣可以減少http請求,提高工程的可維護性。
>依賴聲明
編譯過程中會掃描編譯標記建立一張靜態資源關系表。資源關系表詳細記錄了項目內的靜態資源id、發布后的線上路徑、資源類型以及 依賴關系 和 資源打包 等信息。后端或前端框架拿到這張表根據組件所需的包按需加載資源,從而提升前端運行的性能。
fis的命令
>fis3 relaese
編譯並發布你的項目
>-h或--help 幫助
>-d或--dest 編譯后的代碼部署路徑
>-w或--watch 監聽文件變化觸發編譯
>-L或者--live 編譯后自動刷新瀏覽器
>-c或者–clean 清除這個項目本地服務
>-l或者--lint 編譯的時候自動代碼檢查
>-u或者--unique 編譯緩存
>-r或者--root 指定項目權限
>--no-color 變色輸出
>fis3 install
使用fis安裝一些公共的組件
>fis3 server
啟動一個本地服務器,它采用php-java-bridge技術實現, 依賴java、php-cgi外部環境。
>start 啟動服務
>stop 關閉服務
>resatrt 重啟服務
> info 輸出服務器信息
>open打開服務器目錄文檔
>clean 清除服務器目錄的文件
>install 下載
>init 初始化服務器框架
>fis3 inspect
查看文件命中的屬性,這些屬性決定文件該如何編譯
簡單解釋一下fis-conf.js 文件
//使用smarty模版
fis.require('smarty')(fis);
//設置項目名
fis.set('namespace', 'kd-activity');
//解析less文件
fis.match('*.less', {
parser: fis.plugin('zuoye-less'),
optimizer: false,
useHash: true,
rExt: '.css'
});
//解析js文件
fis.match('*.js', {
optimizer: false,
parser: fis.plugin('zuoye-babel-6.x')
});
//開發環境的配置
fis.media('dev')
.match('*.tpl', {
optimizer: fis.plugin('html-compress', {
level: 'strip_comment'
})
}).match('*.less', {
optimizer: fis.plugin('clean-css')
}).match('*', {
deploy: fis.plugin('local-deliver', {
//本地server的文件目錄
to: 'C:/Users/zuoyebang/AppData/Local/.fis-plus-tmp/www'
})
});
// 生產環境 意思就是匹配一些文件,做壓縮呀這些處理
fis.media('prod').match('::package', {
packager: fis.plugin('map', {
'/pkg/dreamSchool/pkg_dreamSchool.js': [
'/static/dreamSchool/msgs.js',
'/static/dreamSchool/dreamSchool.js'
],
'/pkg/dreamSchool/pkg_dreamSchool.css': [
'/static/dreamSchool/**.less'
]
})
}).match('!*.{html,tpl}', {
useHash: true
}).match('*-map.json', {
release: '/config/$0',
useHash: false
}).match('*.tpl', {
optimizer: fis.plugin('html-compress', {
level: 'strip_comment'
})
}).match('*.js', {
optimizer: fis.plugin('uglify-js')
}).match('*.less', {
optimizer: fis.plugin('clean-css')
}).match('*.{css,js,png,jpg,bmp,gif,less}', {
// domain: 'https://yy-s.zuoyebang.cc'
});
//本地文件對應和對應的線上文件目錄
var deployConfig = [{
from: '/page/**', // 模板
to: '/home/homework'
}, {
from: '/static/**', // 靜態資源
to: '/home/homework/webroot'
}, {
from: '/widget/**/*', // widget
to: '/home/homework/webroot'
}, {
from: '/widget/**/*.tpl', // widget
to: '/home/homework'
}, {
from: '/config/**', // config
to: '/home/homework/data/smarty'
}, {
from: '/plugin/**', // plugin
to: '/home/homework/php/phplib/ext/smarty/baiduplugins',
subOnly: true
}];
//所有的開發機器
var deployTargets = {
kd12: {
host: '172.30.132.12',
user: 'rd'
},
kd12test: {
host: '172.30.132.12',
user: 'test'
},
test295: {
host: '192.168.241.115'
},
test299: {
host: '192.168.241.119'
},
test170: {
host: '192.168.240.212'
},
test171: {
host: '192.168.240.209'
},
test172: {
host: '192.168.240.218'
},
test173: {
host: '192.168.240.203'
}
};
//使用http-push將對應的文件發送到遠程的機器上
fis.util.map(deployTargets, function(serverName, serverConfig) {
var _deployConfig = fis.util.clone(serverConfig.deploy || deployConfig.map(function(item) {
return Object.assign({}, item, {
to: item.to.replace(/homework/, serverConfig.user || 'homework')
});
}));
for (var i = 0; i < _deployConfig.length; i++) {
var _deploy = _deployConfig[i];
fis.media(serverName).match('*-map.json', {
release: '/config/$0',
deploy: fis.plugin('http-push', {
receiver: 'http://' + serverConfig.host + ':8020/fisreceiver.php',
to: '/home/homework/data/smarty'.replace(/homework/, serverConfig.user || 'homework')
})
}).match(_deploy.from, {
deploy: fis.plugin('http-push', {
receiver: 'http://' + serverConfig.host + ':' + (serverConfig.port || '8020') + '/fisreceiver.php',
to: _deploy.to,
useHash: true
})
});
}
});
build.sh
build.sh是屬於jenkins上線時的執行文件,將文件發布到所有得機器上。
fis的工作原理
fis是基於文件對象進行構建的,每個進入fis的文件都會實例化成一個file對象,整個過程其實都是對這個文件的構造操作過程。構建過程可能使用插件進行擴展。
執行大概流程
>本地release
本地操作啟動fis自帶得服務器,然后將代碼release打包發送到本地服務得目錄下,這樣就可以在本地服務下操作了。
>測試機release
代碼release打包,使用http-push發布到測試機得/fisreceiver.php接口上(此接口用於接收文件,部署到指定路徑),這依賴於php不需要編譯不用重啟的特性,所以我們就直接可以訪問。
fis VS fisp
fis產生之初的定位是做一個內核,編譯體系可以簡單通過基本配置+插件的方式擴展(fisp),fisp適合於后端PHP+Smarty的編譯體系。
fis是沒有目錄規范的,fisp有一套成型的目錄規范。
fisp有一系列PHP+Smarty的實現插件。
fisp實現了產出map.json,解決了很多問題以及自動打包。
fisp的本地調試額外提供了本地數據模擬,URL模擬轉發的功能。