FIS

头像
alogy
    阅读 4 分钟
    2

    Fis简介

    一个工程化的工具,主要用来处理前端的项目。
    作用:代码合并代码压缩资源定义资源嵌套等等。

    fis 是基于流的处理,fis有自己的一个流处理过程:

    • lint: 代码规范

    • parser:代码编译

    • perprocessor: 前置处理

    • standard:代码标准化

    • protprocessor: 后置处理

    • optimizer: 优化处理

    • perpackager: 前置打包

    • packager:打包过程

    • spriter: 图片制作精灵图

    • postpackager: 后置打包

    • deploy: 发布

    fis-conf

    使用fis必须配置fis-conf文件,是fis的入口文件,fis-conf文件名是固定的,而且项目中必须要有此文件

    release

    release指令

    发布。执行这个指令,对项目进行发布。
    参数: -d 发布到某个目录下,后面加上目录的名称,这个目录相对于fis-conf这个文件.

    fis3 release -d test
    

    文件监听机制

    fis3 release -wd test
    

    match

    match()方法

    捕获文件,执行流中的方法.
    参数1:获取的文件
    参数2:处理文件的配置信息。

    // 寻找js 文件, 放在js文件底下
    fis.match('**.js', {
        release: 'js/$0'
    });
    
    // 寻找css 文件, 放在css文件底下
    fis.match('**.css', {
        release: 'css/$0'
    });
    

    globs

    fis中globs语法
    拓展,我们可以将**表示除拓展名以外的任何字符。
    对于多个文件类型处理,我们可以用{},通过,实现对多个文件获取
    $0可以获取前面匹配的文件

    fis.match('**.{js,css}', {
        release: 'public/$0'
    });
    

    fis中的插件

    使用插件: fis-plugin();方法。
    参数1:插件名称。(需要取出插件前缀)

    例如:css压缩插件是fis-optimizer-clean-css
    前缀是:fis-optimizer
    名称: clean-css

    需要在match() 的配置参数中使用。

    fis.match('project/**.css', {
        
        optimizer: fis.plugin('clean-css')
        
    });
    
    

    配置属性
    packTo : 打包参数属性
    release: 是否发布,$0 捕获匹配的文件
    userHash: 添加戳
    userSprite:处理css文件,告知fis3制作精灵图

    css压缩

    css压缩插件: clean-css

    fis.match('project/**.css', {
        
        optimizer: fis.plugin('clean-css')
        
    });
    
    
    

    js压缩

    js压缩插件:uglify-js

    fis.match('index.js', {
        optimizer: fis.plugin('uglify-js')
    });
    
    

    图片PNG优化

    png图片优化插件: fis-optimizer-png-comperessor

    fis将图片压缩内置到包中,只能处理png格式的文件,(png的优化比例最高). fis内置了png格式优化的插件。

    fis.match('demo.png', {
        optimizer: fis.plugin('png-compressor')
    })
    

    精灵图

    fis实现精灵图插件:fis-spriter-csssperiter.

    • 找到css中的那些图片需要制作精灵图,通过 ?__sprite。 这个标识符区分那个图片需要制作精灵图。

    • 在fis中配置,说明那些css图片要做精灵图处理。 userSprite:true。告知fis,需要制作精灵图。

    • 精灵图在流的处理的倒三步,是在打包以后,因此制作过程要再打包过程中处理。

    /* 第一步 */
    .item1 span {
        background: url(../img/01.png?__sprite) center no-repeat;
    }
    

    // 第二步
    fis.match('**.css', {
        'useSprite': true
    });
    
    // 第三步
    fis.match('::package', {
        'spriter': fis.plugin('csssprites') 
    });
    

    ::pageage表示某个过程

    指纹

    为请求的资源文件后面后缀添加名称,为了防止文件更新浏览器缓存。

    fis.match('**.{js,css,png}', {
        'useHash': true
    }); 
    

    嵌入技术

    图片嵌入

    在图片路径添加?__inline

    <img src="img/02.png?__inline" alt="">
    
    /* 样式中添加 */
    background: url(../img/03.png?__inline) center;  
    

    html嵌入资源

    HTML模板嵌入,通过link标签嵌入,rel属性是import,并且href 模版路径后添加?__inline
    CSS嵌入,通过link引入css,路径后添加?__inline
    JS嵌入,通过script引入JS,路径后添加?__inline
    图片嵌入,img标签引入图片,路径末尾添加?__inline

    <body>
    
        <!-- HTML模板嵌入 -->
        <link rel="import" type="text/css" href="tpl/tpl.html?__inline" />
        
        <!-- CSS嵌入 -->
        <link rel="stylesheet" type="text/css" href="css/index.css?__inline"/>
    
        <!-- JS嵌入 -->    
        <script src="js/index.js?__inline" type="text/javascript" charset="utf-8"></script>
    
    </body>
    

    css嵌入资源

    嵌入CSS文件,@import 通过设置文件路径, 在路径末尾 ?__inline
    嵌入图片 ?__inline

    @import url("css.css?__inline");
    .item {
        background: url(../img/04.png?__inline) center;
    }
    

    js嵌入资源

    嵌入JS文件,通过__inline( url ); 方法
    嵌入CSS文件,通过__inline( url );
    嵌入img ,通过__inline( url );
    在JS文件中嵌入JS,CSS,img文件不需要在路径末尾加?__inline

    __inline('demo.js')  // 不需要加分号 ,加分号fis3 会补一个分号,编译后,会变成两个分号
    
    var imgSrc = __inline('../img/01.png'); // 编译后是base64的图片
    
    var styles = __inline('../css/css.css'); // 编译后: var styles = "body{background:#0ff}";
    

    打包

    fis内置了打包工具,但是有局限性(引入的原始路径并不会修改),通过packTo配置.

    // 压缩css
    fis.match('**.css', {
        optimizer: fis.plugin('clean-css'),
        packTo: 'css/app.css'
    });
    
    
    // 压缩js
    fis.match('**.js', {
        optimizer: fis.plugin('uglify-js'),
        packTo: 'js/app.js'
    });
    

    打包插件:fis3-postpackager-loader。 替换内置打包工具中的路径不会自动修改。

    // 修改打包路径
    fis.match('::package', {
        postpackager: fis.plugin('loader')
    });
    

    模块化开发中应用

    fis在模块化开发中应用

    fis.hook(). 添加钩子插件
    参数插件名称

    seajs 使用 fis-hook-cmd 插件

    在match();中配置 isMod: 表是是否模块化.

    cmd规范

    插件:fis-hook-cmd

    在模块化文件中不需要定义模块,不需要定义define(); 直接通过require();引用需要的需要的模块即可。fis编译的时候会通过配置模块规范自动添加模块的代码。

    // 配置cmd规范
    fis.hook('cmd');
    
    fis.match('js/**.js', {
        isMod: true
    });
    

    amd 规范

    插件: fis-hook-amd

    入口,引入文件方式不同。

    // 钩子
    fis.hook('amd');
    fis.match('js/**.js', {
        isMod: true
    });
    

    commonjs

    插件:fis-hook-commonjs
    mod.js

    <!-- 文件需要引入mod.js -->
    <script type="text/javascript" src="mod.js"></script>
    

    fis.hook('commonjs');
    
    fis.match('js/**.js', {
        isMod: true,
        packTo: 'js/all.js'
    });
    

    alogy
    1.3k 声望121 粉丝

    // Designer and Developer


    下一篇 »
    LESS