一般动作
登录
Wiki: BROPEN ▼: Document Index
»
Space: FAQ ▼: Document Index
»
Page: 资源管理插件 asset-pipeline 使用说明
搜索
zh
页面动作
导出 ▼: 以PDF格式导出 以RTF格式导出 以HTML格式导出
更多动作 ▼: 打印预览 察看源码
欢迎进入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）：访问表单视图时自动引入

标签： BroToolkit BroFramework
在2014-08-05 10:23上被李小翔创建

- 评论 （0）
- 附件 （0）
- 记录
- 信息

# 快速链接

- 首页
- 新闻动态
- FAQ

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