fis-postpackager-simple插件的使用

作者：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）


如果您觉得本文的内容对您的学习有所帮助，您可以微信：