作者: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插件,可以自动将页面中独立的资源引用替换为打包资源。
[b]1,安装fis-postpackager-simple插件[/b]
$ npm install -g fis-postpackager-simple
[b]2,在配置文件fis-conf.js开启[/b]
插件安装到本地后,我们还需要通过项目配置文件开启插件,修改项目根目录下的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插件
[b]3,使用fis-postpackager-simple应用打包[/b]
为了开发调试时更加方便 fis release 默认不会合并资源,在指定了 --pack 参数后,FIS才会进行打包合并处理。
$ fis release --optimize --md5 --pack # fis release -omp
再次浏览我们可以发现原有的基础类库引用已经被替换为了 lib.js ,关于fis-postpackager-simple插件更多的静态资源处理策略和使用方法,请参考fis-postpackager-simple。
[url]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[/url]
批注:未运行前文件19个,运行后文件16个。(四变一)
[b]4,使用fis-postpackager-simple自动打包[/b]
利用simple插件,我们还可以按页面进行自动合并,将没有通过pack设置打包的零散资源自动合并起来。
//file : fis-conf.js
再次运行FIS构建项目
$ fis release -omp
我们会发现剩余的零散资源已经被自动合并了。
批注:文件数变为7个了。主要是所有除lib.js外的js文件都合并变成一个auto_combine.js,所有的css文件都合并变成一个auto_combine.css文件。
另图片资源没有变化。还是原来的个数。
[b]5,使用fis-postpackager-simple合并图片[/b]
通过上述几个步骤,我们已经成功将脚本资源和样式表资源进行了合并,但是为了进一步的减少HTTP连接数,我们还可以对引用的图片资源进行进一步的合并。
在FIS中,如果样式文件中引用图片时,添加了 ?__sprite query,那么将样式文件使用 pack 设置进行合并后,不仅仅会合并样式文件,还会将所有标识了合并的图片进行合并处理。
我们通过 pack 设置,将所有样式文件合并为 aio.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)
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
前言
虽然可以通过如下方式打包,但是可以通过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插件,可以自动将页面中独立的资源引用替换为打包资源。
[b]1,安装fis-postpackager-simple插件[/b]
$ npm install -g fis-postpackager-simple
[b]2,在配置文件fis-conf.js开启[/b]
插件安装到本地后,我们还需要通过项目配置文件开启插件,修改项目根目录下的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');
[b]3,使用fis-postpackager-simple应用打包[/b]
//打包规则
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。
[url]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[/url]
批注:未运行前文件19个,运行后文件16个。(四变一)
[b]4,使用fis-postpackager-simple自动打包[/b]
利用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文件。
另图片资源没有变化。还是原来的个数。
[b]5,使用fis-postpackager-simple合并图片[/b]
通过上述几个步骤,我们已经成功将脚本资源和样式表资源进行了合并,但是为了进一步的减少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)
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]