这节讲资源合并，实战目录如下：

<!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

FIS常用功能之资源合并的更多相关文章

  1. FIS常用功能之资源压缩

    fis server start后 资源压缩,只需要使用命令,不需要添加任何配置 fis release --optimize 或: fis release -o 在浏览器访问按F12,观看压缩前后文 ...

  2. FIS常用功能之MD5版本

    静态资源后缀加上md5参数,有效解决缓存更新问题 fis release --optimize --md5 使用前后对比:

  3. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  4. FastReport.Net 常用功能总汇

    一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...

  5. WebPack常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  6. Keil的使用方法 - 常用功能（二）

    Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(一),关于(文件和编译)工具栏每一个按钮的功能描述和快捷键的使用. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链 ...

  7. Keil的使用方法 - 常用功能（一）

    Ⅰ.概述 学习一门软件的开发,开发工具的掌握可以说尤为重要.由于Keil集成开发工具支持多种MCU平台的开发,是市面上比较常见的,也是功能比较强大一款IDE.所以,对于大多数人说,选择Keil几乎是单 ...

  8. 转： 尽己力，无愧于心 FastReport.Net 常用功能总汇

    FastReport.Net 常用功能总汇   一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要 ...

  9. ROS(indigo)机器人操作系统学习资料和常用功能包汇总整理(ubuntu14.04LTS)

    ROS(indigo)机器人操作系统学习资料和常用功能包汇总整理(ubuntu14.04LTS) 1. 网站资源: ROSwiki官网:http://wiki.ros.org/cn GitHub    ...

随机推荐

  1. BZOJ 2460: [BeiJing2011]元素 贪心，线性基

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2460 解法:从大到小排序,依次贪心的添加到当前集合就可以了,需要动态维护线性基.用拟阵证明 ...

  2. Cause: java.lang.ClassCastException: java.lang.String cannot be cast to org.apache.ibatis.mapping.MappedStatement

    我用的是pagehelper 4.2.0,利用其进行表单的分页处理并进行展示,在第一次执行的时候能够看到分页后的结果,刷新一下第二次就显示不出来,控制台出现: Cause: java.lang.Cla ...

  3. linux的rpm教程

    1.rmp查询 1.1 软件包详细信息 rpm -qpi  httpd-2.4.25-9.fc27.x86_64.rpm 系统将会列出这个软件包的详细资料,包括含有多少个文件.各文件名称.文件大小.创 ...

  4. NOIP 2013 day1

    tags: 模拟 快速幂 逆序对 树状数组 归并排序 最小生成树 lca 倍增 categories: 信息学竞赛 总结 tex live 2017.iso 转圈游戏 火柴排队 货车运输 转圈游戏 s ...

  5. LCT 文档

    file:///C:/Users/Frank/Downloads/QTREE%E8%A7%A3%E6%B3%95%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B ...

  6. tinyhttpd ------ C 语言实现最简单的 HTTP 服务器

    工作流程: 1>服务器启动,在指定端口或随机选取端口绑定httpd服务. 2>收到一个http请求时(其实就是listen端口accept的时候),派生一个线程运行accept_reque ...

  7. Nginx-进程模型

    1.整体框架 正常执行起来的Nginx有很多进程,有master_process和worker_process进程,master_process是监控进程即主线程,worker_process是工作进 ...

  8. Spring + MyBatis 多数据源实现

    近期,在项目中需要做分库,但是因为某些原因,没有采用开源的分库插件,而是采用了同事之前弄得多数据源形式实现的分库.对于多数据源,本人在实际项目也中遇到的不多,之前的项目大多是服务化,以RPC的形式获得 ...

  9. gradle eclipse 配置

    http://blog.csdn.net/caolaosanahnu/article/details/17022321 从gradle官网下载 解压,配置环境变量,gradle -v 验证 gradl ...

  10. node中--save跟--save--dev

    --save参数表示将该模块写入dependencies属性, --save-dev表示将该模块写入devDependencies属性.   dependencies字段指定了项目运行所依赖的模, d ...