• FIS常用功能之资源合并


    这节讲资源合并,实战目录如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>fis test</title>
        <script src="/js/a.js"></script>
        <script src="/js/b.js"></script>
        <script src="/js/other1.js"></script>
        <script src="/js/other2.js"></script>
        <link rel="stylesheet" href="/css/global.css">
        <link rel="stylesheet" href="/css/home.css">
    </head>
    <body>
        <h1>Hello FIS</h1>
    </body>
    </html>

    1.纯合并

    创建文件 fis-config.js ,内容:

    fis.config.set('pack', {
        //设置js打包规则
        '/pkg/lib.js': [
            'js/a.js',
            'js/b.js'
        ],
        //设置CSS打包规则
        '/pkg/aio.css': '**.css'
    });

    运行:

    fis release -pd ./

    然后就会出现一个新的文件夹pkg,包含合并后的文件lib.js和aio.css

     

    2.:合并并替换原资源

    需要利用:fis-postpackager-simple插件

    首先安装

    npm install -g fis-postpackager-simple

    修改fis-config.js 

    //开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple
    fis.config.set('modules.postpackager', 'simple');
    
    //设置合并打包规则
    fis.config.set('pack', {
        '/pkg/lib.js': [
            'js/a.js',
            'js/b.js'
        ],
        '/pkg/aio.css': '**.css'
    });

    打包合并:

    fis release --pack

    合并前后页面引用情况

    3.:对零散资源打包

    在fis-conf.js加入

    //将零散资源进行自动打包
     fis.config.set('settings.postpackager.simple.autoCombine', true);

    再次运行FIS构建项目

    fis release -omp

  • 相关阅读:
    bzoj1218 本来dp 但是数据弱 枚举可过
    bzoj1816二分答案 扑克牌
    bzoj2748 水dp
    最长上升子序列(nlog n)
    bzoj1798线段树。。调的要死
    HTML5 移动开发 (HTML5标签和属性)
    关于全屏布局
    关于z-index这个层级的问题
    面板数据模型
    竞争模型
  • 原文地址:https://www.cnblogs.com/tinyphp/p/4963000.html
Copyright © 2020-2023  润新知