Grails 资产管道未满足资源需求答案

【问题标题】：Grails asset-pipeline not picking up resource requirementsGrails 资产管道未满足资源需求
【发布时间】：2014-05-31 10:37:43
【问题描述】：

我有一个 Grails (2.3.6) 应用程序并已将其配置为使用 asset-pipeline:

// BuildConfig.groovy
plugins {
    compile ":asset-pipeline:1.8.7"
}

在我的grails-app/assets/javascripts 目录中，我有：

myapp.js
fizz.js
buzz.js

然后在我的grails-app/views/index.gsp:

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
        <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'myapp.css')}" />
    </head>
    <body>
        <div id="home" class="page">
            <!-- Content... -->
        </div>
        <asset:javascript src="myapp.js" />
    </body>
</html>

最后，在我的myapp.js：

= require fizz.js
= require buzz.js
= require_self

// INITIALIZE THE APPLICATION.
init();

function init() {
    alert("Do stuff!");
}

当我执行grails run-app 时，应用程序启动得很好。当我去查看页面源（index.gsp）时，我得到：

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
        <link rel="stylesheet" type="text/css" href="/static/css/myapp.css" />
    </head>
    <body>
        <div id="home" class="page">
            <!-- Content... -->
        </div>
        <script src="/assets/myapp.js?compile=false" type="text/javascript" ></script>
    </body>
</html>

但是当我点击/assets/myapp.js?compile=false 链接查看其源代码时，我得到的 JS 与上面完全相同：

= require fizz.js
= require buzz.js
= require_self

// INITIALIZE THE APPLICATION.
init();

function init() {
    alert("Do stuff!");
}

所以不仅asset-pipeline 不翻译require 顶部的这些require 语句并拉入指定的JS 文件，但它也没有剥离requires任何一个。如何配置插件以正确拉入我的其他 JS 库（fizz.js 和 buzz.js）？

【问题讨论】：

标签： javascript grails asset-pipeline

【解决方案1】：

在使用资产管道时，需要与require 指令一起使用适当的语法。

myapp.js 应该这样开头（第一行没有空）：

//= require fizz.js
//= require buzz.js
//= require_self

详细参考Usage documentations。

【讨论】：

【解决方案2】：

在实现#dmahapatro 回答的内容后，您的页面源代码应该会自动显示

 !DOCTYPE html>
 <html>
<head>
    <title>My App</title>
    <link rel="stylesheet" type="text/css" href="/static/css/myapp.css" />
</head>
<body>
    <div id="home" class="page">
        <!-- Content... -->
    </div>
    <script src="/assets/myapp.js?compile=false" type="text/javascript" ></script><script src="/assets/fizz.js?compile=false" type="text/javascript" ></script><script src="/assets/buzz.js?compile=false" type="text/javascript" ></script>
</body>
</html>

下面这段代码sn-p

    /*
     *= require fizz.js
    */

当您在应用程序上打开页面时，告诉资产管道将 fizz.js 文件作为链接脚本添加到标题中

这也适用于 css 文件，视情况而定。

【讨论】：

在 gsp 页面上，您可以使用资产管道标签库包含资产。我更喜欢将全局脚本放置在仅指定 js 清单文件的布局中，但是上面的 taglib 也适用于在特定页面的清单中添加其他文件。我的布局文件将在头部包含类似的内容。