首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    FIS源码解析-整体架构

    1、 FIS支持三个命令,分别是fis release、fis server、fis install。...其实FIS比较精华的部分集中在fis release这个命令,不过fis server这个命令相对简单,更有助于我们从纷繁的细节跳出来,窥探FIS的整体概貌。 假设我们已经安装了FIS。...在基于fis的二次解决方案,一般会将名字覆盖 fis.cli.name = 'fis'; //colors // 日志友好的需求 fis.cli.colors = require('colors')...API fis.cli.help = function(){ // ... }; // 需要打印帮助信息的命令,在 fis.cli.help() 遍历到。...整个流程归纳如下: 用户输入FIS命令,如fis server open 解析命令,根据指令加载对应插件,如fis-command-server 执行命令 fis-command-server源码 三个命令相关的插件

    46210

    FIS 插件机制

    打包的原理是通过 FIS 的pack 配置,对文件资源进行合并等操作,最后产出关于文件打包信息到 map.json 文件,并产生相应的打包文件。...所以 FIS 的打包结果并 不会再嵌入到某个文件内,而是利用map.json的数据进行运行时打包信息查询。...一、 在fis-conf.js配置: fis.config.merge({ pack : { 'aio.js' : ['a.js', 'b.js', 'c.js'] }...-[需要插入的时机名称]-[自定义插件名],例如:fis-parse-my-css; 编译阶段插件 1、在自定义插件的index.js: /* * fis * http://fis.baidu.com...,从0到1发布一个npm包 小提示: 当然为了更快速的搞定一些小需求,可以把插件功能直接写到配置文件 fis-conf.js ; // vi fis-conf.js fis.config.set('modules.postprocessor.js

    91630

    FIS源码解析-整体架构

    1、 FIS支持三个命令,分别是fis release、fis server、fis install。...其实FIS比较精华的部分集中在fis release这个命令,不过fis server这个命令相对简单,更有助于我们从纷繁的细节跳出来,窥探FIS的整体概貌。 假设我们已经安装了FIS。...在基于fis的二次解决方案,一般会将名字覆盖 fis.cli.name = 'fis'; //colors // 日志友好的需求 fis.cli.colors = require('colors')...API fis.cli.help = function(){ // ... }; // 需要打印帮助信息的命令,在 fis.cli.help() 遍历到。...整个流程归纳如下: 用户输入FIS命令,如fis server open 解析命令,根据指令加载对应插件,如fis-command-server 执行命令 fis-command-server源码 三个命令相关的插件

    1K60

    fis3 文档学习研究

    这是 fis3 的一个重要概念,其意味着有多份配置,每一份配置都可以让 fis3 进行不同的编译; fis.media('dev').match('*.js', { optimizer: null...设置为false表示不生成文件,@param: string packTo: '/static/pkg_widget.js', //分配到这个属性的文件将会合并到这个属性配置的文件,@...('a.css'); 4.2 资源定位 其实官方文档讲了很多,但很简单,主要是在没有inline的条件下将内嵌的资源处理后加上后缀,放入到相对应的发布目录自动定位。...用户可以在html的注释声明依赖关系,这些依赖关系最终会被记录下来,当某个文件包含字符 RESOURCE_MAP 那么这个记录会被字符串化后替换 RESOURCE_MAP。...html完全一致 五、工作原理 1.

    91900

    fis3 新特性应用

    本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 fis3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: 资源嵌入 资源定位...3.2 缓存清理 在打包过程,通常我们需要许多复杂的处理,为了提升构建效率,可能我们需要做一些缓存机制 但是,我们需要在构建结束的时候,把这些缓存清掉,否则就会影响下一次构建(在watch的情况下)...compile:preprocessor, compile:standard, compile:postprocessor, compile:optimizer 以上5个事件是文件compile阶段5...个关键节点的锚点 在每个阶段,对file进行相应阶段的处理之前,fis3都会先抛出一个事件 这些节点的意义也非常深远,甚至可以改变fis3的compile流程,同样笔者也举两个例子 4.1 不需要两个插件...compile是单文件处理,在这个过程是拿不到其他文件的,它不像package阶段插件那样,有一个ret参数可以使用 但是,有时候,我们在compile阶段真的需要其他一些文件资源的时候怎么办?

    73390

    FIS应用实例-require.js+CMD模块

    前面文章讲了FIS的源码实现细节,这篇文章偏实战一些,给出FIS跟require.js结合的简单例子。 FIS编译流程 如果已熟悉了FIS的编译设计,可以跳过这一节,直接进入下一小结。...FIS的编译主要有三步: 命令解析-->资源编译-->资源部署 资源编译:FIS将文件资源抽象成File实例,该实例上有文件资源类型、id、内容、部署路径等的属性。...FIS的这套编译体系,使得基于FIS的扩展相对比较容易。在扩展的同时,还可以确保编译的高性能。针对资源编译环节的扩展,除非是设计不合理,不然一般情况下不会导致性能的急剧降低。...实战:修改fis-conf.js 首先,打开fis-conf.js,加入如下配置。...配置大致意思是: 在postprocessor环节,针对js文件,调用fis-postprocessor-jswrapper进行处理。

    2K90

    fis3 文档学习研究

    这是 fis3 的一个重要概念,其意味着有多份配置,每一份配置都可以让 fis3 进行不同的编译; fis.media('dev').match('*.js', { optimizer: null...设置为false表示不生成文件,@param: string packTo: '/static/pkg_widget.js', //分配到这个属性的文件将会合并到这个属性配置的文件,@...('a.css'); 4.2 资源定位 其实官方文档讲了很多,但很简单,主要是在没有inline的条件下将内嵌的资源处理后加上后缀,放入到相对应的发布目录自动定位。...用户可以在html的注释声明依赖关系,这些依赖关系最终会被记录下来,当某个文件包含字符 RESOURCE_MAP 那么这个记录会被字符串化后替换 RESOURCE_MAP。...html完全一致 五、工作原理 1.

    68820

    如何编写fis3插件

    本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载 目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。...fis 编译流程 image.png 官方的这张图,对fis的构建流程讲述的很清楚了,主要包括单文件编译和打包,业务的插件也主要是这两种,至于是pre还是post,差别不是特别大。...参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require...('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require...// 测试用例 beforeEach(function() { // 这里写各种fis的配置 fis .match('*', {

    53310

    fis3 新特性应用

    本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 fis3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: 资源嵌入 资源定位...3.2 缓存清理 在打包过程,通常我们需要许多复杂的处理,为了提升构建效率,可能我们需要做一些缓存机制 但是,我们需要在构建结束的时候,把这些缓存清掉,否则就会影响下一次构建(在watch的情况下)...compile:preprocessor, compile:standard, compile:postprocessor, compile:optimizer 以上5个事件是文件compile阶段5...个关键节点的锚点 在每个阶段,对file进行相应阶段的处理之前,fis3都会先抛出一个事件 这些节点的意义也非常深远,甚至可以改变fis3的compile流程,同样笔者也举两个例子 4.1 不需要两个插件...compile是单文件处理,在这个过程是拿不到其他文件的,它不像package阶段插件那样,有一个ret参数可以使用 但是,有时候,我们在compile阶段真的需要其他一些文件资源的时候怎么办?

    52420

    【工具】fis3 - 使用教程(01)

    fis3给出了命令’fis3 inspect’,能帮助我们直观地看到文件都应用哪些规则属性。 文件指纹 听到“指纹”,你能联系到ID,因为指纹同id一样是唯一的。...在传统开发,我们通常会给资源添加一个唯一标识,以便浏览器缓存。例如即加上时间戳的方式来唯一标识资源文件。 与传统不同,fis3使用MD5戳 对资源文件进行唯一标识。...通常,在传统开发我们把这项工作交给了服务端来做。现在我们可以通过如fis、gulp等这样的构建工具来方便快速的完成。 我们要使用规则属性的“插件属性optimizer”来完成。...雪碧图(Sprite)——资源图片合并 需要注意的是,fis3只会对在CSS文件对资源路径带有?__sprite的图片进行合并(如:background-image:url(‘....做法:配置文件fis-conf.js 首先,我们先改写css文件引用图片的路径的写法,带上?__sprite。

    41030
    领券