在 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>
此外,我们对 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):访问表单视图时自动引入