`
zccst
  • 浏览: 3315493 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

fis-postpackager-simple插件的使用

    博客分类:
  • fis
阅读更多
作者: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-jpgtowebp

    在实际开发中,除了`fis-postpackager-jpgtowebp`之外,还可以结合其他fis插件一起使用,例如用于CSS压缩的`fis-plugin-clean-css`,JavaScript压缩的`fis-plugin-uglify-js`,以及HTML模板处理等,以实现全方位的...

    前端开源库-fis-postpackager-simple

    【前端开源库-fis-postpackager-simple】是一个针对前端开发的开源工具,它是一个FIS(Fast Interactive Site)框架下的Postpackager插件。FIS是百度推出的一个快速、高效且灵活的前端构建系统,旨在解决前端开发中...

    前端开源库-fis-postpackager-replace

    而`fis-postpackager-replace`是FIS框架中的一个后包装器插件,它的主要职责是在FIS完成文件合并之后,对合并后的代码进行自定义的文本替换,满足开发者对代码中特定字符串的改造需求。 在实际开发中,我们经常遇到...

    前端开源库-fis-postpackager-amdclean

    - 对于使用AMD组织代码的大型项目,可以使用 `fis-postpackager-amdclean` 在构建过程中优化生产环境的代码,降低用户等待时间。 - 开发者想要将AMD项目迁移到非AMD环境,或者希望兼容既有的CommonJS或ES模块的代码...

    前端开源库-fis-postpackager-autoload

    本文将详细介绍“前端开源库-fis-postpackager-autoload”,这是一个专为fis(Fast Interaction Server)框架设计的自动加载资源的postpackager插件。 FIS(Fast Interaction Server)是阿里巴巴推出的一款前端构建...

    前端开源库-fis-postpackager-inCSSToWebP

    标题中的“前端开源库-fis-postpackager-inCSSToWebP”指的是一个前端开发工具,它是FIS(Fast Interface System)框架的一个插件。FIS是一个由阿里巴巴开发的前端构建工具,它提供了丰富的配置选项和插件系统,用于...

    前端开源库-fis3-postpackager-simplify

    而`fis3-postpackager-simplify`则是FIS3生态中的一个插件,用于简化打包过程,尤其在处理环境变量配置时提供了便利。 **FIS3简介** FIS3是一个面向现代Web应用的构建工具,它的核心特性包括: 1. **模块化管理**...

    wn2-postpackager-loader:修改自 fis3-postpackager-loader,解决一个script标签丢失自定义属性的bug,其他均与fis-postpackager-loader一致

    修改自 fis3-postpackager-loader,解决一个script标签丢失自定义属性的bug,其他均与fis-postpackager-loader一致 静态资源前端加载器,用来分析页面中使用的和依赖的资源(js或css), 并将这些资源做一定的优化后...

    zoo-postpackager-simple:用于自动打包页面零散资源和应用打包资源 [基于 fis-postpackager-simple ,服务于 fis-zoo ]

    `fis-postpackager-simple` 是 `fis` 生态系统中的一个插件,负责处理项目中各种资源的打包过程。而 `zoo-postpackager-simple` 则是对 `fis-postpackager-simple` 的扩展和优化,专为 `fis-zoo` 设计,目的是简化和...

    fis-postpackager-relative-url:fis插件 将css中引用的资源地址统一修改为相对地址

    fis-postpackager-relative-url 将css中引用的资源地址统一修改为相对路径的插件 背景 百度统一引入CDN机器,然而https需在路径后加上一个id戳,因此绝对路径的引用方式将会出现一些问题。 功能 自动将css中引用的@...

    fis-postpackager-requirejs:fis 模块生成 require-config.js

    要使用fis-postpackager-requirejs,你需要在FIS项目中安装插件,然后在`fis-conf.js`配置文件中启用它,并根据项目需求调整配置参数。例如: ```javascript fis.config.set('modules.postpackager', 'requirejs'); ...

    fis-postpackager-pack:fis-postpackager-pack

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

    fis-postpackager-lsdiff-map

    在使用`fis-postpackager-lsdiff-map`时,你需要将该插件集成到你的FIS配置中。这通常涉及到修改`fis-conf.js`配置文件,添加对`fis-postpackager-lsdiff-map`的引用,并设置相应的配置选项。一旦配置完成,每次执行...

    fis-postpackager-sea

    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-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-postpackager-cdnmarker:CDN插件

    fis-postpostpackager-cdnmarker 介绍 标记资源是否使用cdn,并修改css文件中引入的资源的路径为相对路径, 以适应各种cdn服务。 使用 修改fis-conf.js,添加 fis.config.set('modules.postpackager', 'cdnmarker'); ...

    前端开源库-fis-deploy-amdpackage

    在使用"fis-deploy-amdpackage"之前,你需要安装FIS,并确保你的项目已经按照FIS的规则组织。然后,你可以通过FIS的配置文件(通常是`.fis-conf.js`)来启用这个插件,并设置相关的参数,比如输出路径、转换规则等。...

    fis3-postpackager-loader-customized:对fis3-postpackager-loader源码进行的修改

    fis3-postpackager-loader-customized对fis3-postpackager-loader源码进行的修改。使所有合一的文件名已html名而定(而不是路径),也修改了发布路径

    前端开源库-fis-lint-jshint

    在使用“fis-lint-jshint”时,你需要在fis的配置文件(通常是fis-conf.js)中引入并配置该插件。你可以指定要忽略的文件、设置JSHint的选项,例如启用或禁用某些规则、设置全局变量等。一旦配置完毕,每次执行fis ...

    前端开源库-fis-parser-less-px2rem

    在 Less 文件中,我们可以使用 `fis-parser-less-px2rem` 插件,自动将px单位转换为rem,这在响应式设计中尤其重要,因为rem单位相对于根元素(html)的字体大小,可以方便地通过更改一个值来调整所有子元素的大小,...

Global site tag (gtag.js) - Google Analytics