资源管理插件 asset-pipeline 使用说明?
李小翔
2014-08-05 10:24

内容列表
资源定义 	 # 
资源引用 	 # 
BroToolkit/BroFWK 扩展 	 # 

在 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）：访问表单视图时自动引入