fis-plus 學習筆記

　　學習了一些fls-plus前端集成的東西；學的很皮毛，不少都是對官網的解釋但願與你們分享，並能獲得你們的指正。

　　參考文檔：http://oak.baidu.com/fis-plus/document.html；

　　　　　　　http://fex.baidu.com/fis-site/docs/beginning/getting-started.html

 

學習總結：
　　
　　一：明確fisp能作什麼事情；
　　二：精通fisp的命令，fisp install ;fisp release [options](最重要);fisp server [options];
　　三：fisp的目錄結構；以及生成目錄結構；
　　四：遇到配置問題，打包問題，發佈問題，及時參考文檔！

　　首先解釋fis-plus是什麼東東——FIS-PLUS 是基於 FIS(FIS Front-end Integrated Solution（前端集成解決方案）是專爲解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題的前端工程化構建工具。)，應用於後端是 PHP，模板是 Smarty 的場景。如今被大多數百度產品使用。

　　Step1: 爲何要用fis ??

• 前端框架：提供組件加載及管理框架支持，提供前端基礎庫及組件庫。
• 模板框架：提供組件化開發模式支持；配合前端框架收集頁面所須要的最小靜態資源需求；留有充分的性能優化空間，性能優化對工程師透明。
• 自動化工具：提供基本優化能力；爲前端框架、模板框架提供輔助支持。
• 輔助開發工具：提高工程師的開發體驗，下降調試、部署成本。

　　Step2:安裝環境：具體步驟參考官網http://oak.baidu.com/fis-plus/document.html；有一點須要注意的就是node的版本，安裝fis-sass-plugin/fisp-sass-plugin的插件須要node的低版本，建議使用nvm作node的版本管理工具;

　　Step3:分模塊開發；

　　　　——爲了發佈迭代的方便，拆分紅不一樣的子系統。

　　　　——模塊的組成結構：同名依賴（page名字和css,js名字相同）

使用、、等smarty插件時，必須指定資源的id;B:、等JavaScript函數，可使用id　　　　　　　　模塊名
　　　　　　　　├── fis-conf.js 自動化的相關命令，相似gulp,grunt；指定namespace； 　　　　　　　　├── page 頁面模板 　　　　　　　　├── server.conf 它裏面能夠配置url轉發，能夠方便在本地模擬ajax請求等 　　　　　　　　├── static 放一些不須要組件化的公共庫 　　　　　　　　├── test 和page下的模板相對應，代表哪一個模板用哪一個數據文件進行渲染 　　　　　　　　└── widget 組件，模板組件，JS組件，CSS組件，會被組件化
　　
　　Step4: 靜態資源ID（css,js等的加載路徑的變量）；
　　　　　——何時使用：A:ajaxpagewidgetrequirehtmlrequirerequire.async

　　　　——定義方式：在namespace:< 資源相對於模塊根目錄的路徑 >;如

　　Step5:page頁面的編寫過程；
　　　　——引入css，js
　　　　　　——page 中的js,css <%require name="home:widget/a.css"%>
　　　　　　　　//home:模塊名，
　　　　　　　　//widget:相對於模塊目錄的路徑
　　　　　　　　//page名.css:根據同名依賴的原則，會根據page文件夾下頁面的文件名，加載相應的css和js；
　　　　——引入組件Widget:{%widget name="home:widget/header/header.tpl"%}
　　　　——引入組件中的css,js不須要使用{%require%}或link,href;根據同名依賴會自動加載文件名相同的css，js如header.css/header.js：

　　Step6:資源壓縮（fis release --optimize/fis release -o）

　　Step7:添加文件版本（fis release --optimize --md5 # fis release -om FIS可以根據靜態資源的內容自動生成文件版本，自動更新資源引用路徑，解決緩存更新問題，告別手動更新時間戳。）
　 
　　Step8:資源合併（fis release -omp 經過pack進行資源文件合併，在fis-config.js裏配置）
　　　
 ——圖片的合併，經過background-position來顯示每一個小圖，詳情使用文檔；
　　

　　Step9:安裝插件；npm install -g fis-parser-less；
　　　　——在fis-config.js中配置
　　　
　　

　　Step10:常見命令
　　　　—— fisp install ：一些公共組件，jquery,echarts,還有官網提供的demo；
　　　　—— fisp release [options]:
　　　　　　-r [模塊名]//部署模塊；
　　　　　　--watch/-w //模塊變化的監測；
　　　　　　--live/-L //經過livereload插件，編譯後自動刷新（偶爾頁面加載會卡死在這個livereload上）；
　　　　　　--dest/-d //指定部署位置，能夠是本地路徑，也能夠是遠程路徑；
　　　　　　　　——在配置文件的deploy節點配置進行發佈，能夠將代碼上傳到遠端
　　　　　　　　

　　　　　　--md5/-m //在編譯的時候能夠對文件自動加md5戳，今後告別在靜態資源url後面寫。（*md戳，是針對有修改的有利於優化發佈流程）；
　　　　　　--link/-l //自動代碼監測；
　　　　　　--pack/-p //根據fis-config.js的配置進行打包；
　　　　　　--optimize/-o //對js,css,html進行壓縮；
　　　　　　--domains/-D //爲資源添加domain域名；

　　　　—— fisp server [options] ：調用調試服務器；依賴Java的jre和php 的php-cgi環境；
　　　　　　　--open //打開發布的文件；
　　　　　　　--start //調用服務器，經過8080端口；
　　　　　　　--stop //關閉服務器；
　　　　　　　--clean //清除發佈文件


到這裏，基本上就算是fis入門了，感謝閱讀與指正，接下來。分享一些小的細節；

一，配置：
　　模塊名：fis.config.set('namespace', 'common');
　　 編碼格式：fis.config.set('project.charset', 'gbk');//默認是utf-8;
　　 md5戳長度：fis.config.set('project.md5Length', 8);//默認是7爲數；
　　 smarty定界符：fis.config.set('settings.smarty', {'left_delimiter' : '<{','right_delimiter' : '}>'})；

謝謝你們！