欢迎进入Wiki » FAQ » 资源管理插件 asset-pipeline 使用说明?

资源管理插件 asset-pipeline 使用说明?

在2014-08-05 10:24上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

在 BroToolkit/FWK/BPM 4.1.0 版本中,使用 asset-pipeline 插件代替了 resources 插件来管理图片、css、js等静态资源,相对 resources 插件,原生的带来了效率提升、依赖减少、调试方便、war包预编译等各种优势。

详细的官方文档点这里,下面对插件的使用做一个简要的说明。

资源定义

assets-pipeline 插件默认创建了下面三个文件夹来存取资源:

grails-app/assets/javascripts
grails-app/assets/images
grails-app/assets/stylesheets

在css、js等资源文件中,可以通过不同的指令 require 来引入其他资源,页面上只需调用一个资源即可引入相关的其他资源,并且能够避免重复引用、打成war包后会将所有引用资源预编译到一个最小化过的js文件中以提升加载效率。

如 BroFWK 中预定义了大量资源,如 js_main.js 资源:

  • 导入另外一个资源包 jquery_common
  • 导入 fwk 中的一些工具 js 文件,如 search.js 等
  • 导入应用中的自定义 js 文件:application.js
// require jquery_common

//= require fwk/frozenTable/frozenTable.js

//= require fwk/osm.selector/osm_tree.js
//= require fwk/osm.selector/osm_selector.js
//= require fwk/application.js
//= require fwk/search.js

//= require bpm/process.js

//= require application.js

//= encoding UTF-8

再如 FWK 中的 css_list.css 资源:

  • 导入另外一个资源包 css_main
  • 导入应用中自定义的 common、list 样式文件,扩展名可以是 css 或者 scss(SAAS
/*
*= require css_main

*= require common.css
*= require common.scss

*= require list.css
*= require list.scss

*= encoding UTF-8
*/

需要注意的是,样式文件中,如果引用了 images 下的图片资源,二者的相对路径是一样的,也就是说不需要写 url(../images/icons/foo.png),而应该写成  url(icons/foo.png);并且无论资源在哪个插件中,相对路径都是一样的。

资源引用

assets-pipeline 插件提供了很多标签,常见的如:

<%-- 在页面上引用资源 --%>
<asset:stylesheet href="application.css"/>
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<asset:image src="icons/delete.png"/>

<%-- 获得资源路径 --%>
<link href="${assetPath(src: 'manifest.json')}"/>

<%-- 判断资源是否存在 --%>
<asset:assetPathExists src="test.js">
    This will only be displayed if the asset exists
</asset:assetPathExists>

BroToolkit/BroFWK 扩展

此外,我们对 assets 插件进行了扩展和改造:

  • 支持 js 国际化:
    增加了指令 require_i18n,参考 BroFWK 中的 i18n_zh_CN.js 定义
  • 按照插件依赖关系来处理同名资源的覆盖关系:
    和扩展的视图文件覆盖关系类似,在应用中添加一个同路径、同名的资源,即可覆盖掉任何插件中的相同资源
  • 在 BroFWK 中预定义了大量样式与js库,会自动引入应用中的资源,并且通过表单模板自动引入:
    • portal.js:访问 portal 时自动引入
    • application.js:访问 portal、列表、表单等视图时自动引入
    • i18n/message_zh_CN.js:同上,中文语言定义文件
    • common.scss(css):同上,公共的样式表
    • portal.scss(css):访问 portal 时自动引入
    • list.scss(css):访问列表视图时自动引入
    • form.scss(css):访问表单视图时自动引入
在2014-08-05 10:23上被李小翔创建

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号