Question

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页面中，我只需在<meta name="layout" content="special">标记中添加<header>，就像正常一样。

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

Answer 1

如果您要离开special.gsp AS-IS：

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

根据您的IDE，assets文件夹可能位于顶层，而且它位于grails-app内的事实可能会被抽象出来。例如，使用GGTS中的“Project Explorer”视图，我的项目下直接有一个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;使用asset-pipeline的文件需要导入其他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文件。

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

1 个答案: