-
“依赖分析”需要在JavaScript运行时通过正则匹配到模块的依赖关系，然后顺着依赖链，把所有需要加载的模块按顺序一一加载完毕查看全部
-
fis server 命令查看全部
-
amd查看全部
-
commonjs查看全部
-
FIS如何实现模块化：Mod js，类commonjs的编程方式，设计用来做前端工程模块方案。 define(id，factory),factory(require,exports,module) 模块不用编写define，fis自动加上 require(id)同步加载 require.async(names,onload,onerror)手动异步加载查看全部
-
CommonJs规范：模块氏同步加载的，适合服务端，如nodejs AMD规范：异步方式加载模块，更适合浏览器端，语法define定义，require(module,callback) 如requirejs,seajs,js运行时支持匿名闭包，依赖分析和模块加载查看全部
-
内容嵌入：img base64嵌入，css\js\html内容嵌入；_inline(path)函数 依赖声明：静态资源表（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内嵌 ?_inline fis release -p;查看全部
-
fis添加md5版本号 fis release -m;静态资源增加md5版本号 基于文件内容的hash的冗余生成，系统更新不存在更新间隙问题；回滚版本只需回滚html;可以启用永久强缓存，不会受到构造CDN缓存攻击查看全部
-
fis release -h;帮助 fis release -d+path;发布到任意路径 fis release -o;压缩css js fis release -p;静态资源合并 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');然后重新发布项目查看全部
-
fis release -d +path;path任意路径查看全部
-
node -v; npm -v; npm install fis -g; fis -v; fis server start;启动服务 fis server open; 打开服务目录 fis release 发布项目，map.json静态资源表查看全部
-
fis的优势查看全部
-
fis网站查看全部
-
FIS Plus demo: https://github.com/fex-team/fis-plus-pc-demo 执行npm install -g fis-plus 命令，安装fis-plus。安装完成后 执行 fisp -v,查看版本号,检测是否安装成功. lights是 fis 提供的包管理工具，托管了 fis 所有资源。是使用 fis 的时候，必不可少的利器。执行 npm install -g lights 命令. FIS 的所有示例及其组件都用包管理工具 lights 进行管理，使用 lights 安装 demo。 lights install pc-demo 发布common以及home两个文件夹,cmd执行 fisp release -r common fisp release -r home 预览,cmd执行：fisp server start ,启动成功后会自动打开浏览器，访问首页.查看全部
-
什么是组件化 前端组件化并不等于Javascript模块化。 实现一个页面功能需要Javascript、CSS和Template三种语言相互组织。 组件化是需要将Javascript、CSS和Template同时都考虑进去的模块化方案,而非仅仅 Javascript 模块化方案。 组件化的问题 资源加载 组件加载自身资源 Js阻塞渲染;Css无法并发加载;性能问题更严重 AMD 限制加载策略;延后可用时间;CSS闪屏问题;一刀切的方案 组件复用 理想方案 A组件看起来不错;新项目用一下;搞定收工 现实是 相对路径计算混乱;绝对路径迁移困难;合并后资源路径异常;资源无法随意合并 总体思路 1.组件维护资源依赖 map.json表 2.用构建解决路径问题 开发阶段 使用相对路径;编码自然;符合组件化管理;保证复用 构建阶段 替换绝对路径;自由合并 3.资源加载自动化 FIS根据 map.json 实现按需加载; 总结 工程师只维护依赖关系 构建期/运行时按需加载 用工具与框架解决开发与运行的冲突 开发自然,使用灵活. 高阶文章推荐 前端工程之模块化 http://fex.baidu.com/blog/2014/03/fis-module/查看全部
-
前端模块化 FIS通过插件扩展可以完美的支持模块化的前端开发方案,通过FIS的二次封装能力,封装了一个功能完备的纯前端模块化方案 pure . pure 安装 npm install -g fis-pure pure -v 下载demo代码: git clone https://github.com/hefangshi/fis-pure-demo 启动内置的调试服务器： pure server start 在命令行下cd到我们下载的样例项目中 cd fis-pure-demo 执行fis的编译命令 pure release 刷新浏览器，查看我们的项目。可以看到所有的模块化资源均已自动加载进来了。虽然目前项目可以正常运行，但是这种加载方式会造成连接数过多，让我们调整参数，对资源进行自动合并 pure release -p 再次浏览页面，我们可以发现原有的大量静态资源已经自动合并。 参考网址:https://github.com/hefangshi/fis-pure-demo查看全部
-
Mod使用 Mod使用define来定义一个模块 define(id,factory) factory提供了3个参数: require,exports,module,用于模块的引用和导出. 在平常开发中,我们无需关注模块的定义,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(){ ...; } }) 模块调用 Mod会在模块初始化之前自动加载相关依赖。当我们需要一个模块时,只需提供一个模块名即可. require(id) require.async(names,onload,onerror) 所需模块已预先加载,require可以立即(同步)返回该模块引用. 不需要考虑何时该使用同步接口何时调用异步接口. 有些模块无需在启动时载入,因此modJS提供了可以在运行时异步加载模块的接口( require.async() ). FIS并不强行绑定mod,使用RequireJS可以参考以下demo. Demo: https://github.com/fex-team/fis-amd-demo 插件: https://github.com/fex-team/fis-postprocessor-amd查看全部
-
执行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 函数,或者注释中的 @require 字段 标记的依赖关系. 如 var $ = require('jquery'); 再如: /** * @require demo.css * @require list.js */ 在css中声明依赖,同样通过注释中的 @require 字段 标记的依赖关系 /** * @require reset.css */查看全部
-
FIS三种语言能力 2.内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 内容嵌入可以为工程师提供诸如图片base64嵌入到css、js里,前端模版编译到js文件中,将js、css、html拆分成几个文件最后合并到一起的能力。可以有效减少http请求数,提高性能。 在html中嵌入资源 给资源加上?_inline参数来标记资源嵌入需求,资源涵盖图片(logo.gif?_inline)、样式文件(demo.css?_inline)、脚本资源(demo.js?_inline)、页面文件(demo.html?_inline)。 在js中嵌入资源,使用编译函数__inline()来提供内容嵌入能力. 源码: __inline('demo.js'); 编译后：console.log('demo.js content'); 源码: var img = __inline('logo.gif'); 编译后: var img='data:image/gif;base64,R01GOOD...kyf'; 在css中嵌入资源:可以通过添加 ?__inline 编译标记把文件内容嵌入进来. 源码:@import url('demo.css?__inline'); 编译后: img{border:5px solid #ccc}; 3.依赖声明: 在一个文本文件内标记对其他资源的依赖关系. 在html中声明依赖 用户可以在html的注释中声明依赖关系,这些依赖关系会被记录到fis编译产出的 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.资源定位：获取任何开发中所使用资源的线上路径 在html中定位资源 fis支持对html中script、link、style、video等标签src或href属性进行分析,一旦它们资源定位属性可以命中已存在的文件,则把命中文件的url路径替换到属性中,同时保留原来url中的query查询信息。 值得注意,资源定位结果可以被fis的配置文件控制: fis.config.merge({ roadmap: { path: [ { //所有的js文件 reg : '**.js', //发布到/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语言中,可以使用编译函数__uri(path)来定位资源,fis分析js文件或html中的script标签内内容时会替换该函数所指向文件的线上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表示设置后缀名为less的文件的parser，第二个less表示使用fis-parser-less进行编译 fis.config.set('modules.parser.less', 'less'); //将less文件编译为css fis.config.set('roadmap.ext.less', 'css'); 关于压缩 合并 打包 MD5 图片cssSprites和base64,以及less转css,可查看： http://www.bubuko.com/infodetail-648919.html查看全部
-
FIS图片csssprite和base64码嵌入 1.csssprite // 首先要配置FIS中使用csssprites fis.config.set('modules.spriter','csssprites'); // 设置图片合并的最小间隔 fis.config.set('settings.spriter.csssprites.margin', 20); // 合并后的css文件会自动进行csssprites fis.config.set('pack', { // 设置CSS打包规则，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 后缀即可实现自动编译成base64格式) .style{ background: url(images/logo.gif?__inline); } 编译后 .style{ background: url(data:image/gif;base64,R01GOD1hDgGBALMAAGBn6eYxLvvy9pnKyf0...Jzna6853wjKc85OnPeoYgAgA7); }查看全部
-
FIS能够根据静态资源的内容自动生成文件版本,自动跟新资源引用路径,解决缓存更新问题,告别手动更新时间戳。 我们通过开启--md5参数,为项目中的静态资源添加md5版本号。 fis release --optimize --md5 /* 缩写方式: fis release -om ,o代表压缩,m代表md5版本号 */ md5 - 基于文件内容的hash版本冗余机制 MD5版本号好处 1.线上的a.js不是同名文件覆盖,而是文件名+hash的冗余,所以可以先上线静态资源,再上线html页面,不存在间隙问题 2.遇到问题回滚版本的时候,无需回滚a.js,只需回滚页面即可 3.由于静态资源版本号是文件内容的hash,因此所有静态资源可以开启永久强缓存,只有更新了内容的文件才会缓存失效,缓存利用率大增. 4.修改静态资源后会在线上产生新的文件,一个文件对应一个版本,因此不会受到构造CDN缓存形式的攻击 静态资源版本更新与缓存：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 : 静态资源压缩(无需配置,也可以通过配置,对某些文件过滤不压缩) fis release -p : 静态资源合并(配合 fis-conf.js 使用) fis release -pd ./output : fis对静态文件的合并到指定文件夹,这里指代将静态资源合并到当前目录下的output文件夹中. 静态资源压缩合并,可以通过配置 fis-conf.js ,并运行 fis release -op 实现资源压缩合并,fis-conf.js配置可以如下: // 设置图片合并的最小间隔 fis.config.set('settings.spriter.csssprites.margin', 20); //开启simple插件，自动将页面中的资源引用替换为打包资源,注意需要先安装插件 npm install -g fis-postpackager-simple fis.config.set('modules.postpackager', 'simple'); // 设置打包规则 fis.config.set('pack', { '/pkg/lib.js': [ 'js/lib/jquery.js', 'js/lib/underscore.js', 'js/lib/backbone.js', 'js/lib/backbone.localStorage.js', ], // 设置CSS打包规则，CSS打包的同时会进行图片合并 '/pkg/aio.css': '**.css' }); // 开启simple对零散资源的自动合并 fis.config.set('settings.postpackager.simple.autoCombine', true);查看全部
-
安装fis命令：npm install fis -g 查看fis版本: fis -v 启动fis调试服务器：fis server start (fis server -h 查看fis server 命令行帮助) 产看fis调试服务器的根目录：fis server open 本地代码编译并发布到调试服务器中：fis release(在本地代码中右击打开命令窗口,运行fis release，可以将本地代码编译并投送到根目录下)查看全部
举报
0/150
提交
取消