使用 Grails Asset-Pipeline 将 JavaScript 置于底层答案

【问题标题】：Put JavaScript at the Bottom with Grails Asset-Pipeline使用 Grails Asset-Pipeline 将 JavaScript 置于底层
【发布时间】：2015-03-15 06:21:35
【问题描述】：

通过 Grails 资源插件，您可以使用如下 gsp 布局：

<!DOCTYPE html>
<html>
<head>
    <g:layoutHead/>
    <r:layoutResources /> 
</head>
<body>
   <g:layoutBody/>


   <g:javascript library="jquery" plugin="jquery" /> 

   <r:layoutResources />

</body>

使用r:layoutResources 标签可以指定资源应该包含在JQuery 之后的页面底部，它位于布局gsp 的底部。

有没有办法对资产管道插件做同样的事情？ JQuery包含后如何将资源放在文档事件的底部？

【问题讨论】：

标签： javascript grails groovy asset-pipeline grails-2.0

【解决方案1】：

在你的布局文件中，输入：

<html>
<body>
....
<!-- Your layout scripts -->
<asset:javascript src="app.js"/>

<!-- Custom placeholder for page scripts -->
<g:ifPageProperty name="page.footScripts">
    <g:pageProperty name="page.footScripts" />
</g:ifPageProperty>

</body>
</html>

并在您的页面（即 index.gsp ）中，放入此

<html>
<body>
...
...
</body>
</html>

<content tag="footScripts">
    <asset:javascript src="jqueryui/jquery-ui.min"/>
</content>

这样，您可以使用在各个页面中定义的内容来扩展您的布局。

Grails 3 documentation ( though the same in Grails 2 )

参见章节 8.2.6 Sitemesh 内容块

【讨论】：

【解决方案2】：

如果你想在你的子脚本上添加多个脚本，你可以这样做

你的parent.gsp底部

<g:each in="${pageScript}">
    <asset:javascript src="${it.value}.js"/>
</g:each>

你的child.gsp

<g:set var="pageScript" value="['script1, script2']"/>

【讨论】：

这感觉更像我用过的所有其他模板引擎。

【解决方案3】：

我只是在 .gsp 或布局文件的底部添加行：

<asset:stylesheet src="xxx.css"/>
<asset:javascript src="xxx.js"/>

xxx.js 和 xxx.css 可以包含一个清单以加载更多内容。

您将通过清单加载 JQuery：

xxx.js:

//= require jquery
//= require select2.min.js
//= require_self

【讨论】：

当你将它添加到你的布局文件中时，这将不起作用，因为布局中的 JQuery 将包含在 xxx.js 之后。
它对我有用。我将 JQuery 内容包含在 application.js 调用的清单中，该调用在我的布局 .gsp 的 <head> 中列出。我也认为您可以在 xxx 清单中添加 JQuery。
我不喜欢这个解决方案。
@confile 有什么理由支持您不喜欢该解决方案吗？
在资源插件中也可以做到这一点。您可以定义 jQuery 模块并定制一个新模块 dependsOn jQuery 模块。我看不出为什么不使用答案中显示的方式。 @配置文件

【解决方案4】：

无论你使用什么插件，你都可以用<g:pageProperty/>标签解决这个问题（反正我和你一样用asset-pipeline测试了这个解决方案）。

解决方案的教程在这里：http://mythinkpond.com/2014/02/02/grails-adding-javascript-bottom-page/

【讨论】：