网站首页 > 开源技术 正文
Grails 3使用Asset Pipeline插件来实现静态资源（如图片、css、js等）的管理
Asset Pipeline引入资源的方式，或者说Asset Pipeline的常见写法如下：
application.js----------------
//注释
//= require jquery
//= require app/models.js
//= require_tree views
//= require_self
console.log("This is my javascript manifest");
application.css----------------
/*
注释
*= require bootstrap
*= require font-awesome
*= require navigation/header.css
*= require_tree components
*/
注意：在asset-pipeline中，扩展名可写可不写，即写成models.js或者models都行，写成header或header.css都可。很酷！对吧？
通常，为了指定js或css文件的编码格式，我们可以这么做：
<script src="application.js" charset="utf-8"/>
但这样的做法，在产品模式下或者打成war包时，会失效。那么怎么做？在asset-pipeline中，可使用关键代码encoding UTF-8
application.js----------------
//=encoding UTF-8
//=require_self
//=require_tree .
application.css----------------
*= encoding UTF-8
*= require mobile
*= require_self
####################
在Grails下asset-pipeline资源所在位置为：grails-app/assets
值得注意的是，grails-app/assets文件夹下的第一层目录，感觉上类似于命名空间，但不计算在路径之中，只用于对资源进行分门别类，如：
assets/javascripts — 名称自定，通常用javascripts，用于存放js文件
assets/stylesheets — 名称自定，通常用stylesheets，用于存放css文件
assets/images - 名称自定，通常用images，用于存放图片
assets/libs - 名称自定，通常用libs，用于存放功能组件，即很可能同时包含了css、javascript、images
######################
在gradle中，资源对应关系举例（*代表任意文件夹）：
application.js----------------
//= require table
对应着grails-app/assets/*/table.js
######################
在gradle中对asset-pipeline进行配置，build.gradle：
assets {
minifyJs = true
minifyCss = true
enableSourceMaps = true
maxThreads = 4 //useful for concurrent asset processing during build
configOptions = [:] //useful for custom config on extension libraries
minifyOptions = [
optimizationLevel: 'SIMPLE',
angularPass: true // Can use @ngInject annotation for Angular Apps
]
includes = []
excludes = ['**/*.less'] //Example Exclude GLOB pattern
//for plugin packaging
packagePlugin=false //set to true if this is a library
//developmentRuntime can be turned off
developmentRuntime=true
//if you want to customize the jar task this task runs on you can specify a jarTaskName
jarTaskName=null
// Can add custom asset locations (directories or individual jar files)
from '/vendor/lib'
from '/path/to/file.jar'
}
#################
在页面中引入资源：
<head>
<asset:javascript src="application.js"/>
<asset:stylesheet src="application.css"/>
</head>
grails-app/assets/*/application.js
grails-app/assets/*/application.css
<asset:image src="logo.png" width="200" height="200"/>
grails-app/assets/*/delete.png
<asset:image src="icons/delete.png"/>
grails-app/assets/*/icons/delete.png
<link href="${assetPath(src: 'manifest.json')}"/>
grails-app/assets/*/manifest.json
在css样式中引入资源：
.house {
background-image: url("skin/house.png");
width:150px;
height:150px;
}
grails-app/assets/*/skin/house.png
.information {
background: url("/assets/skin/information.png") #FF6100 repeat-y right;
width:150px;
height:150px;
}
grails-app/assets/*/skin/information.png
###############
application.js----------------
//= require jquery-2.2.0.min
//= require bootstrap
//= require_tree .
//= require_self
注意（先后顺序）：
//= require jquery-2.2.0.min，最先引入，grails-app/assets/*/jquery-2.2.0.min.js
//= require bootstrap，第二引入，grails-app/assets/*/bootstrap.js
//= require_tree .，引入其他没引入的js，次序随意，深度遍历，即引入当前文件所在的文件夹（grails-app/assets/*/）下的所有未被引入的js
//= require_self，引入自身，即application.js
猜你喜欢
- 2024-10-05 新配色 KAI1 要来了!登场倒计时!（全新配色）
- 2024-10-05 龙虾回归!「熟龙虾」Dunk SB 首次曝光
- 2024-10-05 0门槛的自动化管理平台，不懂技术也能玩转DevOps
- 2024-10-05 为什么Java大神，都在看Spring Boot和Spring Cloud的书?
- 2024-10-05 TS「新倒钩」最新实物!网友:等不及了!
- 2024-10-05 不鸽了!元年「白蓝 AJ4」复刻日期曝光!
- 2024-10-05 新「白水泥」AJ3 实物首次曝光!发售日期有了
- 2024-10-05 TS「新倒钩」多款配色曝光!你喜欢哪个?
- 2024-10-05 Grails指南17配置之多数据源（guns多数据源配置）
- 2024-10-05 Grails指南18配置之版本（grails中文参考手册）
欢迎 你 发表评论:
- 05-14WP8.1 GDR1的NTP时间同步没有解决问题
- 05-14抑郁症与焦虑症(四):补充色氨酸，5HTP的作用
- 05-14ntp服务器多久同步一次呢
- 05-14简单三步，轻松解决NVR时间不同步问题
- 05-14Linux的300+个真实运维场景——19 NTP 配置与管理
- 05-14海康威视录像机时间不准怎么办录像机无法查看回放录像，NTP校时
- 05-14安全加倍，解密极氪001电池安全技术
- 05-14海康威视录像机NTP服务器
- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论，来添加一个吧(●'◡'●)