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

<!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. windows访问linux共享文件夹

    1.windows的网上邻居,是通过smb协议来共享信息的,如果需要给访问linux上的共享目录被windows访问到,需要linux有smb协议 sudo apt-get install samba ...

  2. SSH认证原理和批量分发管理

    SSH密码认证原理 几点说明: 1.服务端/etc/ssh目录下有三对公钥私钥: [root@m01 ssh]# ls moduli ssh_config sshd_config ssh_host_d ...

  3. C#ActiveX安装项目

    C#开发的ActiveX控件发布方式有三种: 制作客户端安装包,分发给客户机安装: 制作在线安装包,客户机联机安装: 使用html中object的codebase指向安装包地址. 以下为制作安装包: ...

  4. MYSQL 索引无效和索引有效的详细介绍

    1.WHERE字句的查询条件里有不等于号(WHERE column!=...),MYSQL将无法使用索引 2.类似地,如果WHERE字句的查询条件里使用了函数(如:WHERE DAY(column)= ...

  5. 利用BeanUtils工具类封装表单数据

    一.BeanUtils工具类的使用 1.首先导入BeanUtils工具类的jar包 commons-beanutils-1.8.0.jar commons-logging-1.1.1.jar 2.se ...

  6. Linux下undefined reference to ‘pthread_create’问题解决 zz

    接触了Linux系统编程中的线程编程模块,可gcc sample.c(习惯把书上的sample代码写进sample.c文件中)出现“undefined reference to ‘pthread_cr ...

  7. LeetCode解题报告—— Reverse Linked List II & Restore IP Addresses & Unique Binary Search Trees II

    1. Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one-pass ...

  8. 确实,k8s的时代,ingress负载用traefik比nginx方便啊

    参考文档: https://mritd.me/2016/12/06/try-traefik-on-kubernetes/#13ingress 由于微服务架构以及 Docker 技术和 kubernet ...

  9. 基于kbengine 0.4.20 解读

    [以下文章转自kbe论坛] MMOG服务端是一种高品质的工程项目,品读开源的kbe是一种乐趣.本文档我带童鞋们一起领略一下.囿于我知识面和经验方面所限,文中所述之处难免有错误存在,还请读童鞋们睁大慧眼 ...

  10. Win7 + VirtualBox + CentOS (服务器版 无桌面) 使用共享文件夹

    http://jingyan.baidu.com/article/b2c186c8ffb607c46ff6ff61.html