如何将自定义 CSS/JS 添加到 Grails 2.4.x layouts/templates？

Question

Grails 2.4.5 在这里，我相信（如果我错了请纠正我）asset-pipeline 插件是 default/desired 管理方法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？这里有什么特别说明吗？

Answer 1

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

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

根据您的 IDE，assets 文件夹可能位于顶层，而它位于 grails-app 中的事实可能是抽象的。例如，使用GGTS中的'Project Explorer'视图，在我的项目下直接有一个assets文件夹。

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

//= my-custom.js

或

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

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

附加信息：
我在下面的评论中提到了 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
*/

你去吧，现在你有所有 3 个 css 文件和 2 个 js 文件，只使用它们的父文件和 require_tree 语法。

如何将自定义 CSS/JS 添加到 Grails 2.4.x layouts/templates？

How to add custom CSS/JS to Grails 2.4.x layouts/templates?

javascript

css

grails

asset-pipeline