前言
fis是百度的前端自動構(gòu)建工具，是一套前后端分離的自動化工具包。
和其它自動構(gòu)建比起來，更強(qiáng)的地方還是在與后端的整合(PHP Smarty 、Laravel、http://oak.baidu.com/fis-plus、)。
fis首頁
http://fis.baidu.com/
PHP后端方案
http://oak.baidu.com/fis-plus
JAVA后端方案
https://github.com/fex-team/jello
Node后端方案
http://fex.baidu.com/yog2/
WEB前端研發(fā)部的門戶網(wǎng)站有很多不錯的文章
http://fex.baidu.com/
安裝
- 需要
Node.js、NPM環(huán)境
- 新安裝 FIS3
npm install -g fis3
- 更新 FIS3
npm update -g fis3
- 檢查安裝
輸入
fis3 -v
正常輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
v3.4.25
/\\\\\\\\\\\\\\\ /\\\\\\\\\\\ /\\\\\\\\\\\
\/\\\/////////// \/////\\\/// /\\\/////////\\\
\/\\\ \/\\\ \//\\\ \///
\/\\\\\\\\\\\ \/\\\ \////\\\
\/\\\/////// \/\\\ \////\\\
\/\\\ \/\\\ \////\\\
\/\\\ \/\\\ /\\\ \//\\\
\/\\\ /\\\\\\\\\\\ \///\\\\\\\\\\\/
\/// \/////////// \///////////
macos 下需要 sudo
安裝遇到問題可以參考 https://github.com/fex-team/fis/issues/565
查看命令功能
輸入
fis3
輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
Usage: fis3 <command>
Commands:
init scaffold with specifed template.
install install components
release [media name] build and deploy your project
server <command> [options] launch a server
inspect [media name] inspect the result of fis.match
Options:
-h, --help print this help message
-v, --version print product version and exit
-r, --root <path> specify project root
-f, --file <filename> specify the file path of `fis-conf.js`
--no-color disable colored output
--verbose enable verbose mode
最核心的只有3個命令
install 安裝插件
release 發(fā)布生成文件
server 本地運(yùn)行服務(wù)器
運(yùn)行第一個程序hello word!
fis3設(shè)計(jì)的伸縮性很強(qiáng)，畢竟這是第三個版本了，很優(yōu)秀，后面我們會慢慢研究，先來跑一個hello word!。
下載官方demo
首先git下載fis3
git clone https://github.com/fex-team/fis3.git
生成文件到指定目錄
- 進(jìn)入demo目錄
cd fis3/doc/demo/demo-simple/
- 運(yùn)行生成
fis3 release -d dist
-d 參數(shù)是指輸出到指定目錄
- 輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
Ω ........ 261ms
可以看到disc目錄成功生成
- 變化1：資源位置發(fā)生變化
- 變化2：CSS引用圖片被合并
查看fis-conf.js文件
fis-conf.js這個是fis的核心配置文件，我們來閱讀下，我加入了注釋。
// 載入csssprites合并插件，這個插件已經(jīng)安裝的時候內(nèi)置
fis.match('::packager', {
spriter: fis.plugin('csssprites')
});
// 所以的資源文件取消hash方式，你可以動手打開true看看
fis.match('*', {
useHash: false
});
// 找到j(luò)s文件，并啟用js壓縮
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
});
// 找到css文件并啟用合并
fis.match('*.css', {
useSprite: true,
//optimizer: fis.plugin('clean-css')
});
// 找到png文件并按標(biāo)準(zhǔn)壓縮圖片
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
});
- 大家可以試著修改些參數(shù)然后重新運(yùn)行看看效果
輸入
fis3 release -d dist
運(yùn)行前請先刪除 dist 目錄
查看本地server目錄
輸入
fis3 server open
輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
[INFO] Browse /Users/hans/.fis3-tmp/www
會打開www所以在的資源管理器窗口
fis3-server-open
發(fā)布到server的www目錄
輸入
fis3 release
默認(rèn)輸出到server的www目錄
fis3-release
運(yùn)行本地server服務(wù)
輸入
fis3 server start
輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
Starting fis-server .. at port [8080]
[INFO] Browse http://127.0.0.1:8080/
[INFO] Or browse http://169.254.189.89:8080/
fis3-server-start
關(guān)閉本地server服務(wù)
輸入
fis3 server stop
輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
[INFO] Shutdown with pid [2341]
實(shí)時更新開發(fā)模式
輸入
fis3 server start wL
輸出
[INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
Starting fis-server .. at port [8080]
[INFO] Browse http://127.0.0.1:8080/
[INFO] Or browse http://169.254.189.89:8080/
修改內(nèi)容后瀏覽器自動刷新
