如何将自定义 CSS/JS 添加到 Grails 2.4.x 布局/模板？答案

【问题标题】：How to add custom CSS/JS to Grails 2.4.x layouts/templates?如何将自定义 CSS/JS 添加到 Grails 2.4.x 布局/模板？
【发布时间】：2015-10-22 14:52:07
【问题描述】：

这里是 Grails 2.4.5，我相信（如果我错了，请纠正我）asset-pipeline 插件是管理 CSS/JS 资源的默认/所需方法。

我有一些自定义 CSS/JS 文件，我想将它们包含在我的 GSP 页面的大部分子集中，并且想知道如何添加它们：

使用asset-pipeline插件；但是...
这样我就可以（以某种方式）从 grails-app/views/layouts/special.gsp 引用它们，然后在每个所需的 GSP 页面中引用 special.gsp 布局。

同样，所需的功能是：

grails-app/views/layouts/special.gsp:
-------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <title><g:layoutTitle default="My app!"/></title>
        <asset:stylesheet src="my-custom.css"/>
        <g:layoutHead/>
    </head>
    <body>
        <g:layoutBody/>
        <asset:javascript src="my-custom.js"/>
    </body>
</html>

然后，在我想使用此布局的任何 GSP 页面中，我只需像往常一样在 <header> 标记中添加一个 <meta name="layout" content="special">。

如何将asset-pipeline 和布局相互配合使用？ 我在哪里放置my-custom.css 和my-custom.js？这里有什么特别说明吗？

【问题讨论】：

标签： javascript css grails asset-pipeline

【解决方案1】：

如果您要保留 special.gsp 原样：

您可以将my-custom.css 放在grails-app\assets\stylesheets 文件夹中
您可以将my-custom.js 放在grails-app\assets\javascripts 文件夹中

根据您的 IDE，assets 文件夹可能位于顶层，并且它位于 grails-app 中的事实可能会被抽象化。例如，使用 GGTS 中的“项目资源管理器”视图，我的项目正下方有一个 assets 文件夹。

使用资产管道，您还可以使用以下语法将这些文件包含在“父”文件中：

//= my-custom.js

或

/*
*= require my-custom.css
*/

这个“父”文件需要像您所做的那样包含在布局中。

其他信息：
我在下面的评论中提到了require_self 和require_tree，我将进一步详细介绍它们的使用。

require_self

myLayout.gsp

<asset:javascript src="myParent.js"/>

myParent.js

//= myCustom.js
//= require_self
console.log("This code runs because of the require_self and after myCustom.js");

myCustom.js

console.log("My require_self is optional because I'm not using the asset-pipeline.");

require_self 用于包含特定文件中存在的 js/css；使用资产管道导入其他 js/css 文件的文件需要它。当文件严格是已经导入的 js/css 时，它是可选的。这就是您可以使用asset-pipeline 来导入您尚未修改的文件（例如jquery.js）的原因，否则您需要将require_self 放在所有文件中。

require_tree

目录结构

grails-app/assets/
   |
   +--javascripts/
   |   |
   |   +--js-parent.js
   |   |
   |   +--myCustomJs
   |      |
   |      +--script1.js
   |      |
   |      +--script1.js
   |
   +--stylesheets/
       |
       +--css-parent.css
       |
       +--myCustomCss
          |
          +--sheet1.css
          |
          +--sheet2.css
          |
          +--sheet3.css

myLayout.gsp

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

js-parent.js

//= require_tree myCustomJs

csss-parent.css

/*
*= require_tree myCustomCss
*/

你去吧，现在你已经使用它们的父级和require_tree 语法提取了所有 3 个 css 文件和 2 个 js 文件。

【讨论】：

感谢@tylerwal (+1) - 如果您不介意，请回答几个快速的后续问题：(1) 是特定于资源类型的特殊“父”语法（例如 //= my-custom.js）吗？意思是我必须使用/* *= require my-custom.css */ 还是可以使用//= my-custom.css？并且 (2) 如果我想使用这种父语法，您能否确认我会在 special.gsp 内添加一个类似于 <asset:javascript src="css-parent.css"/> 的单个 1-liner，然后在 grails-app/assets/stylesheets/css-parent.css 内添加每个 CSS 的 1 个条目文件？再次感谢！
1) 是的，js 或 css 文件中的语法特定于类型。这很重要，因为 //= something 不是有效的 css，因为 css cmets 仅在 /* something */ 块中。 2）我相信你有两个正确的，虽然你的例子<asset:javascript src="css-parent.css"/>应该可能<asset:stylesheet src="css-parent.css"/>，但我认为那只是一个错误。在css-parent.css 中，您可以将每个 css 文件单独保存，也可以使用以下语法在同一目录中包含多个 js/css 文件：require_tree folderName
如果您打算在父文件中包含 css 或 js，您还需要 require_self。乍一看，必须包含您已经包含的内容似乎很愚蠢，但它允许您控制代码的顺序（因为资产管道将在非开发环境中将文件捆绑在一起）。
再次感谢@tylerwal（两个 cmets 都 +1）——你离绿色支票太近了！不是很痛苦，但是您是否有机会通过解释此require_self 和require_tree folderName 业务的工作示例来更新您的答案？假设我想让css-parent.css 加入sheet1.css、sheet2.css 和sheet3.css。让我们假设我们希望js-parent.js 加入script1.js 和script2.js。他们的内容会是什么样子？再次感谢！