-
“依賴分析”需要在JavaScript運行時通過正則匹配到模塊的依賴關(guān)系，然后順著依賴鏈，把所有需要加載的模塊按順序一一加載完畢查看全部
-
fis server 命令查看全部
-
amd查看全部
-
commonjs查看全部
-
FIS如何實現(xiàn)模塊化：Mod js，類commonjs的編程方式，設(shè)計用來做前端工程模塊方案。 define(id，factory),factory(require,exports,module) 模塊不用編寫define，fis自動加上 require(id)同步加載 require.async(names,onload,onerror)手動異步加載查看全部
-
CommonJs規(guī)范：模塊氏同步加載的，適合服務(wù)端，如nodejs AMD規(guī)范：異步方式加載模塊，更適合瀏覽器端，語法define定義，require(module,callback) 如requirejs,seajs,js運行時支持匿名閉包，依賴分析和模塊加載查看全部
-
內(nèi)容嵌入：img base64嵌入，css\js\html內(nèi)容嵌入；_inline(path)函數(shù) 依賴聲明：靜態(tài)資源表（map.json） 語法：@require demo.js @require demo.css var $ = require('jquery') fis.config.merge({ roadmap:{ path:[{reg:'**.html',userMap:true}] } }) fis的運行原理：單文件編譯和打包查看全部
-
fis中使用less fis.config.set('modules.parser.less',less''); less編譯 fis.config.set('roadmap.ext.less','css');查看全部
-
圖片合并 css sprite 啟用css sprite功能 fis-config.js 開啟圖片合并功能 ?_sprite fis.config.set('roadmap.paht',[{ reg:'**.css', useSprite:true }]) fis.config.set('settings.spriter.csssprites.margin',20); fis release -p; 還支持圖片base64內(nèi)嵌 ?_inline fis release -p;查看全部
-
fis添加md5版本號 fis release -m;靜態(tài)資源增加md5版本號 基于文件內(nèi)容的hash的冗余生成，系統(tǒng)更新不存在更新間隙問題；回滾版本只需回滾html;可以啟用永久強緩存，不會受到構(gòu)造CDN緩存攻擊查看全部
-
fis release -h;幫助 fis release -d+path;發(fā)布到任意路徑 fis release -o;壓縮css js fis release -p;靜態(tài)資源合并 fis-config.js 配置文件,支持通配符和正則表達式 fis.config.set('pack',{ 'pkg/lib.js':[ 'lib/mode.js', '/modules/jquery/**.js' ]， ‘pkg/aio.css’:[ '**.css' ] }) fis-postpackager-simple 插件，支持自動替換壓縮后的資源文件引用 npm install fis-postpackager-simple; fis-config.js中配置啟用插件 fis.config.set('modules.postpackager','simple');然后重新發(fā)布項目查看全部
-
fis release -d +path;path任意路徑查看全部
-
node -v; npm -v; npm install fis -g; fis -v; fis server start;啟動服務(wù) fis server open; 打開服務(wù)目錄 fis release 發(fā)布項目，map.json靜態(tài)資源表查看全部
-
fis的優(yōu)勢查看全部
-
fis網(wǎng)站查看全部
-
FIS Plus demo: https://github.com/fex-team/fis-plus-pc-demo 執(zhí)行npm install -g fis-plus 命令，安裝fis-plus。安裝完成后 執(zhí)行 fisp -v?,查看版本號,檢測是否安裝成功. lights是 fis 提供的包管理工具，托管了 fis 所有資源。是使用 fis 的時候，必不可少的利器。執(zhí)行 npm install -g lights? 命令. FIS 的所有示例及其組件都用包管理工具 lights 進行管理，使用 lights 安裝 demo。 lights install pc-demo 發(fā)布common以及home兩個文件夾?,cmd執(zhí)行 fisp release -r common fisp release -r home?? 預覽,cmd執(zhí)行：fisp server start? ,啟動成功后會自動打開瀏覽器，訪問首頁.查看全部
-
什么是組件化 前端組件化并不等于Javascript模塊化。 實現(xiàn)一個頁面功能需要Javascript、CSS和Template三種語言相互組織。 組件化是需要將Javascript、CSS和Template同時都考慮進去的模塊化方案,而非僅僅 Javascript 模塊化方案。 組件化的問題 資源加載 組件加載自身資源 Js阻塞渲染;Css無法并發(fā)加載;性能問題更嚴重 AMD 限制加載策略;延后可用時間;CSS閃屏問題;一刀切的方案 組件復用 理想方案 A組件看起來不錯;新項目用一下;搞定收工 現(xiàn)實是 相對路徑計算混亂;絕對路徑遷移困難;合并后資源路徑異常;資源無法隨意合并 總體思路 1.組件維護資源依賴 map.json表 2.用構(gòu)建解決路徑問題 開發(fā)階段 使用相對路徑;編碼自然;符合組件化管理;保證復用 構(gòu)建階段 替換絕對路徑;自由合并 3.資源加載自動化 FIS根據(jù) map.json 實現(xiàn)按需加載; 總結(jié) 工程師只維護依賴關(guān)系 構(gòu)建期/運行時按需加載 用工具與框架解決開發(fā)與運行的沖突 開發(fā)自然,使用靈活. 高階文章推薦 前端工程之模塊化 http://fex.baidu.com/blog/2014/03/fis-module/查看全部
-
前端模塊化 FIS通過插件擴展可以完美的支持模塊化的前端開發(fā)方案,通過FIS的二次封裝能力,封裝了一個功能完備的純前端模塊化方案 pure . pure 安裝 npm install -g fis-pure pure -v 下載demo代碼: git clone https://github.com/hefangshi/fis-pure-demo 啟動內(nèi)置的調(diào)試服務(wù)器： pure server start 在命令行下cd到我們下載的樣例項目中 cd fis-pure-demo 執(zhí)行fis的編譯命令 pure release 刷新瀏覽器，查看我們的項目?？梢钥吹剿械哪K化資源均已自動加載進來了。雖然目前項目可以正常運行，但是這種加載方式會造成連接數(shù)過多，讓我們調(diào)整參數(shù)，對資源進行自動合并 pure release -p 再次瀏覽頁面，我們可以發(fā)現(xiàn)原有的大量靜態(tài)資源已經(jīng)自動合并。 參考網(wǎng)址:https://github.com/hefangshi/fis-pure-demo查看全部
-
Mod使用 Mod使用define來定義一個模塊 define(id,factory) factory提供了3個參數(shù): require,exports,module,用于模塊的引用和導出. 在平常開發(fā)中,我們無需關(guān)注模塊的定義,FIS提供自動化工具會自動對JS進行define包裝處理. 舉例: //common/widget/menu/menu.js 源代碼 var $ = require('common:widget/jquery/jquery.js'); exports.init = function(){ ...; } //common/widget/menu/menu.js 編譯后 define('common:widget/menu/menu.js',function(require,exports,module){ var $ = require('common:widget/jquery/jquery.js'); exports.init = function(){ ...; } }) 模塊調(diào)用 Mod會在模塊初始化之前自動加載相關(guān)依賴。當我們需要一個模塊時,只需提供一個模塊名即可. require(id) require.async(names,onload,onerror) 所需模塊已預先加載,require可以立即(同步)返回該模塊引用. 不需要考慮何時該使用同步接口何時調(diào)用異步接口. 有些模塊無需在啟動時載入,因此modJS提供了可以在運行時異步加載模塊的接口( require.async() ). FIS并不強行綁定mod,使用RequireJS可以參考以下demo. Demo: https://github.com/fex-team/fis-amd-demo 插件: https://github.com/fex-team/fis-postprocessor-amd查看全部
-
執(zhí)行fis release --dest ./output --md5 命令對項目進行編譯,查看output目錄下的map.json文件,則可看到 : { "res" : { "demo.css" : { "uri" : "/static/css/demo_7defa41.css", "type" : "css" }, "demo.js" : { "uri" : "/static/js/demo_33c5143.js", "type" : "js", "deps" : ["demo.css"] }, "index.html" : { "uri" : "/index.html", "type" : "html", "deps" : ["demo.js","demo.css"] } }, "pkg" : {} } 在js中聲明依賴 fis支持識別js文件中的 require 函數(shù),或者注釋中的 @require 字段 標記的依賴關(guān)系. 如 var $ = require('jquery'); 再如: /** * @require demo.css * @require list.js */ 在css中聲明依賴,同樣通過注釋中的 @require 字段 標記的依賴關(guān)系 /** * @require reset.css */查看全部
-
FIS三種語言能力 2.內(nèi)容嵌入：把一個文件的內(nèi)容(文本)或者base64編碼(圖片)嵌入到另一個文件中 內(nèi)容嵌入可以為工程師提供諸如圖片base64嵌入到css、js里,前端模版編譯到j(luò)s文件中,將js、css、html拆分成幾個文件最后合并到一起的能力?？梢杂行p少http請求數(shù),提高性能。 在html中嵌入資源 給資源加上?_inline參數(shù)來標記資源嵌入需求,資源涵蓋圖片(logo.gif?_inline)、樣式文件(demo.css?_inline)、腳本資源(demo.js?_inline)、頁面文件(demo.html?_inline)。 在js中嵌入資源,使用編譯函數(shù)__inline()來提供內(nèi)容嵌入能力. 源碼: __inline('demo.js'); 編譯后：console.log('demo.js content'); 源碼: var img = __inline('logo.gif'); 編譯后: var img='data:image/gif;base64,R01GOOD...kyf'; 在css中嵌入資源:可以通過添加 ?__inline 編譯標記把文件內(nèi)容嵌入進來. 源碼:@import url('demo.css?__inline'); 編譯后: img{border:5px solid #ccc}; 3.依賴聲明: 在一個文本文件內(nèi)標記對其他資源的依賴關(guān)系. 在html中聲明依賴 用戶可以在html的注釋中聲明依賴關(guān)系,這些依賴關(guān)系會被記錄到fis編譯產(chǎn)出的 map.json 文件中。 如**.html文件 <!-- @require demo.js @require 'demo.css' --> 默認情況下,只有js和css文件會輸出到map.json表中,如果想將html文件加入表中,需要配置 useMap ,例如: fis.config.merge({ roadmap : { path : [ { //所有的html文件 reg : '**.html', //輸出到map.json表中 useMap: true } ] } })查看全部
-
FIS三種語言能力 1.資源定位：獲取任何開發(fā)中所使用資源的線上路徑 在html中定位資源 fis支持對html中script、link、style、video等標簽src或href屬性進行分析,一旦它們資源定位屬性可以命中已存在的文件,則把命中文件的url路徑替換到屬性中,同時保留原來url中的query查詢信息。 值得注意,資源定位結(jié)果可以被fis的配置文件控制: fis.config.merge({ roadmap: { path: [ { //所有的js文件 reg : '**.js', //發(fā)布到/static/js/xxx目錄下 release : '/static/js$&' }, { //所有的css文件 reg : '**.css', release : '/static/css$&' }, { //所有images目錄下的.png .gif文件 reg : /^\/images\/(.*\.(?:png|gif))/i, release : '/static/pic/$1' } ] } }) 在js中定位資源 js語言中,可以使用編譯函數(shù)__uri(path)來定位資源,fis分析js文件或html中的script標簽內(nèi)內(nèi)容時會替換該函數(shù)所指向文件的線上url路徑 源碼: var img = _uri('images/logo.gif'); 編譯后: var img = '/images/logo_74e5229.gif'; 在css中定位資源 fis編譯工具會識別css文件或html的style標簽中 url(path) 以及 src=path 字段,并替換成編譯后url路徑 源碼: .style{background:url('pic/bg.png')} 編譯后: .style{background:url('pic/bg_1b8c3e0.png')}查看全部
-
FIS使用less //modules.parser.less表示設(shè)置后綴名為less的文件的parser，第二個less表示使用fis-parser-less進行編譯 fis.config.set('modules.parser.less', 'less'); //將less文件編譯為css fis.config.set('roadmap.ext.less', 'css'); 關(guān)于壓縮 合并 打包 MD5 圖片cssSprites和base64,以及l(fā)ess轉(zhuǎn)css,可查看： http://www.bubuko.com/infodetail-648919.html查看全部
-
FIS圖片csssprite和base64碼嵌入 1.csssprite // 首先要配置FIS中使用csssprites fis.config.set('modules.spriter','csssprites'); // 設(shè)置圖片合并的最小間隔 fis.config.set('settings.spriter.csssprites.margin', 20); // 合并后的css文件會自動進行csssprites fis.config.set('pack', { // 設(shè)置CSS打包規(guī)則，CSS打包的同時會進行圖片合并 '/pkg/aio.css': '**.css' }); // 如果有個別css文件沒有合并,但是想進行csssprites處理,可以像下面這樣配置 fis.config.set('roadmap.path', [{ reg: /\/static\/.*\.css$/i, // 配置useSprite表示reg匹配到的css需要進行圖片合并 useSprite: true }]); 2.圖片的base64編碼 在css中嵌入圖片的base64(圖片后面加入 ?__inline 后綴即可實現(xiàn)自動編譯成base64格式) .style{ background: url(images/logo.gif?__inline); } 編譯后 .style{ background: url(data:image/gif;base64,R01GOD1hDgGBALMAAGBn6eYxLvvy9pnKyf0...Jzna6853wjKc85OnPeoYgAgA7); }查看全部
-
FIS能夠根據(jù)靜態(tài)資源的內(nèi)容自動生成文件版本,自動跟新資源引用路徑,解決緩存更新問題,告別手動更新時間戳。 我們通過開啟--md5參數(shù),為項目中的靜態(tài)資源添加md5版本號。 fis release --optimize --md5 /* 縮寫方式: fis release -om ,o代表壓縮,m代表md5版本號 */ md5 - 基于文件內(nèi)容的hash版本冗余機制 MD5版本號好處 1.線上的a.js不是同名文件覆蓋,而是文件名+hash的冗余,所以可以先上線靜態(tài)資源,再上線html頁面,不存在間隙問題 2.遇到問題回滾版本的時候,無需回滾a.js,只需回滾頁面即可 3.由于靜態(tài)資源版本號是文件內(nèi)容的hash,因此所有靜態(tài)資源可以開啟永久強緩存,只有更新了內(nèi)容的文件才會緩存失效,緩存利用率大增. 4.修改靜態(tài)資源后會在線上產(chǎn)生新的文件,一個文件對應(yīng)一個版本,因此不會受到構(gòu)造CDN緩存形式的攻擊 靜態(tài)資源版本更新與緩存：http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1查看全部
-
介紹fis的主要功能前,需先準備一個示例項目。我們可以用Lights包管理安裝,也可以從Github獲取(https://github.com/hefangshi/fis-quickstart-demo). npm install -g lights lights install fis-quickstart-demo fis release -h : fis release的命令行幫助 fis release -o : 靜態(tài)資源壓縮(無需配置,也可以通過配置,對某些文件過濾不壓縮) fis release -p : 靜態(tài)資源合并(配合 fis-conf.js 使用) fis release -pd ./output : fis對靜態(tài)文件的合并到指定文件夾,這里指代將靜態(tài)資源合并到當前目錄下的output文件夾中. 靜態(tài)資源壓縮合并,可以通過配置 fis-conf.js ,并運行 fis release -op 實現(xiàn)資源壓縮合并,fis-conf.js配置可以如下: // 設(shè)置圖片合并的最小間隔 fis.config.set('settings.spriter.csssprites.margin', 20); //開啟simple插件，自動將頁面中的資源引用替換為打包資源,注意需要先安裝插件 npm install -g fis-postpackager-simple fis.config.set('modules.postpackager', 'simple'); // 設(shè)置打包規(guī)則 fis.config.set('pack', { '/pkg/lib.js': [ 'js/lib/jquery.js', 'js/lib/underscore.js', 'js/lib/backbone.js', 'js/lib/backbone.localStorage.js', ], // 設(shè)置CSS打包規(guī)則，CSS打包的同時會進行圖片合并 '/pkg/aio.css': '**.css' }); // 開啟simple對零散資源的自動合并 fis.config.set('settings.postpackager.simple.autoCombine', true);查看全部
-
安裝fis命令：npm install fis -g 查看fis版本: fis -v 啟動fis調(diào)試服務(wù)器：fis server start (fis server -h 查看fis server 命令行幫助) 產(chǎn)看fis調(diào)試服務(wù)器的根目錄：fis server open 本地代碼編譯并發(fā)布到調(diào)試服務(wù)器中：fis release(在本地代碼中右擊打開命令窗口,運行fis release，可以將本地代碼編譯并投送到根目錄下)查看全部
舉報
0/150
提交
取消