作者:zccst
前言
虽然可以通过如下方式打包,但是可以通过fis-postpackager-simple插件完整管理
fis-postpackager-simple插件是提供给纯前端应用的打包合并插件,其他定制解决方案,如fis-plus、yogurt等不需要这个插件,需要查看各自的文档了解使用方式。
FIS可以通过pack来进行资源文件的合并,比如我们需要将DEMO中的公共库文件打包在一起,可以修改fis-conf.js配置,加入pack配置
fis.config.set('pack', {
'/pkg/lib.js': [
'js/lib/jquery.js',
'js/lib/underscore.js',
'js/lib/backbone.js',
'js/lib/backbone.localStorage.js',
]
});
设置完pack后,FIS默认只会进行文件打包,不会对页面中的静态资源引用进行替换,我们可以通过引入后端静态资源管理来加载打包模块。不过也可以利用fis-postpackager-simple插件,可以自动将页面中独立的资源引用替换为打包资源。
1,安装fis-postpackager-simple插件
$ npm install -g fis-postpackager-simple
2,在配置文件fis-conf.js开启
插件安装到本地后,我们还需要通过项目配置文件开启插件,修改项目根目录下的fis-conf.js配置,开启fis-postpackager-simple插件
$ cd fis-quickstart-demo
$ vi fis-conf.js #vi是linux下的文本编辑器,windows用户可以选用任意文本编辑器对fis-conf.js文件进行编辑。
//file : fis-conf.js 取消下面的注释开启simple插件
fis.config.set('modules.postpackager', 'simple');
3,使用fis-postpackager-simple应用打包
//打包规则
fis.config.set('pack', {
'/pkg/lib.js': [
'js/lib/jquery.js',
'js/lib/underscore.js',
'js/lib/backbone.js',
'js/lib/backbone.localStorage.js',
]
});
为了开发调试时更加方便 fis release 默认不会合并资源,在指定了 --pack 参数后,FIS才会进行打包合并处理。
$ fis release --optimize --md5 --pack # fis release -omp
再次浏览我们可以发现原有的基础类库引用已经被替换为了 lib.js ,关于fis-postpackager-simple插件更多的静态资源处理策略和使用方法,请参考fis-postpackager-simple。
https://github.com/hefangshi/fis-postpackager-simple#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E5%A4%84%E7%90%86%E7%AD%96%E7%95%A5
批注:未运行前文件19个,运行后文件16个。(四变一)
4,使用fis-postpackager-simple自动打包
利用simple插件,我们还可以按页面进行自动合并,将没有通过pack设置打包的零散资源自动合并起来。
//file : fis-conf.js
//开启autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);
再次运行FIS构建项目
$ fis release -omp
我们会发现剩余的零散资源已经被自动合并了。
批注:文件数变为7个了。主要是所有除lib.js外的js文件都合并变成一个auto_combine.js,所有的css文件都合并变成一个auto_combine.css文件。
另图片资源没有变化。还是原来的个数。
5,使用fis-postpackager-simple合并图片
通过上述几个步骤,我们已经成功将脚本资源和样式表资源进行了合并,但是为了进一步的减少HTTP连接数,我们还可以对引用的图片资源进行进一步的合并。
在FIS中,如果样式文件中引用图片时,添加了 ?__sprite query,那么将样式文件使用 pack 设置进行合并后,不仅仅会合并样式文件,还会将所有标识了合并的图片进行合并处理。
我们通过 pack 设置,将所有样式文件合并为 aio.css
// 设置图片合并的最小间隔
fis.config.set('settings.spriter.csssprites.margin', 20);
// 取消下面的注释设置打包规则
fis.config.set('pack', {
'/pkg/lib.js': [
'js/lib/jquery.js',
'js/lib/underscore.js',
'js/lib/backbone.js',
'js/lib/backbone.localStorage.js',
],
// 取消下面的注释设置CSS打包规则,CSS打包的同时会进行图片合并
'/pkg/aio.css': '**.css'
});
关于图片合并,更详细的使用方法可以参考使用文档
再次运行FIS构建项目
$ fis release -omp
刷新一下,添加几个待办项,我们会发现所有待办项的图片都合并在了一张图片中。
批注:所有xx.css文件中图片资源带__sprite都合并到一个图片了。如:
background: url(./icons/icon_01.gif?__sprite) no-repeat 7px 12px;
批注:原来的auto_combine.css变成了aio.css。(文件名忽略MD5)
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
前端开源库-fis-postpackager-jpgtowebpfis postpackager jpgtowebp,fis插件jpg转webp
前端开源库-fis-postpackager-simplefis postpackager simple是一个postpackager插件,用于fis自动替换包资源和自动合并资源
前端开源库-fis-postpackager-autoloadfis postpackager auto load,一个用于fis自动加载所需资源的postpackager插件
前端开源库-fis-postpackager-inCSSToWebPfis postpackager incsstowebp,fis把外链的css插入到html中
前端开源库-fis-postpackager-amdcleanfis postpackager amdclean,压缩的amd文件,并将amd代码转换为标准的javascript
前端开源库-fis-postpackager-replacefis postpackager replace,用于合并后字符串替换需求,例如某些场景下绝对路径向相对路径替换
修改自 fis3-postpackager-loader,解决一个script标签丢失自定义属性的bug,其他均与fis-postpackager-loader一致 静态资源前端加载器,用来分析页面中使用的和依赖的资源(js或css), 并将这些资源做一定的优化后...
fis-postpackager-relative-url 将css中引用的资源地址统一修改为相对路径的插件 背景 百度统一引入CDN机器,然而https需在路径后加上一个id戳,因此绝对路径的引用方式将会出现一些问题。 功能 自动将css中引用的@...
前端开源库-fis3-postpackager-simplifyFIS3 Postpackager Simplify,跟踪环境变量配置不同的参数
fis-postpackager-pack fis-postpackager-pack 鱼包 fis.config.set('pack', {'pkg/lib.js': ['/lib/**.js'])HTML 页面 <!doctype html><html><head> <meta charset="utf-8"> <meta ...
zoo-postpackager-simple 用于自动打包页面零散资源和应用打包资源 [基于 fis-postpackager-simple ,服务于 fis-zoo ]
fis-postpackager-requirejs fis 模块生成 require-config.js
fis-postpackager-sea 用于 fis 创建 sea-config.js 的 postpackager 插件。用法 $ npm install -g fis-postpackager-sea$ vi path/to/project/fis-conf.js //file : path/to/project/fis-conf.jsfis . config . set...
fis-postpackager-qunit Fis的测试插件,用于测试js文件。用法$ npm install -g fis-postpackager-qunit$ vi path/to/project/fis-conf.js //file : path/to/project/fis-conf.jsfis . config . merge ( { modules :...
fis-postpostpackager-cdnmarker 介绍 标记资源是否使用cdn,并修改css文件中引入的资源的路径为相对路径, 以适应各种cdn服务。 使用 修改fis-conf.js,添加 fis.config.set('modules.postpackager', 'cdnmarker'); ...
fis3-postpackager-loader-customized对fis3-postpackager-loader源码进行的修改。使所有合一的文件名已html名而定(而不是路径),也修改了发布路径
fis3-postpackager-iconfont安装npm install fis3-postpackager-iconfont --save背景项目中使用iconfont时,需要将 SVG 转化成 font 字体文件,同时解决字体css的引入的问题,整个流程比较繁琐。目标在 html 标签上...
安装插件npm install fis-postprocessor-require-async -gnpm install fis-postpackager-autoload -gnpm install fis-packager-depscombine -g安装 components# 进入 fis-components-demo 目录后执行fis install编译...
前端开源库-fis-deploy-amdpackagefis部署amdpackage、打包的amd文件并将amd代码转换为标准javascript
fis & 插件安装npm install ...g fis-parser-marked npm install -g fis-postprocessor-require-async npm install -g fis-postprocessor-jswrapper npm install -g fis-postpackager-autoload npm install -g fis-post