如何使用 Grails 资产管道插件对 JS 和 CSS 进行分组？答案

【问题标题】：How to group JS and CSS using Grails asset-pipeline plugin?如何使用 Grails 资产管道插件对 JS 和 CSS 进行分组？
【发布时间】：2014-09-07 01:55:49
【问题描述】：

我目前正在使用 Grails resources plugin，并且我定义了许多这样的模块：

bootstrap {
    resource url:'js/libs/bootstrap/bootstrap.min.js'
    resource url:'css/libs/bootstrap/bootstrap-responsive.css'
    resource url:'css/libs/bootstrap/bootstrap-glyphicons.css'
    resource url:'css/libs/bootstrap/bootstrap.min.css'
}

这非常方便，因为它将 Javascript 和 CSS 文件组合到一个概念性 Bootstrap 模块中。

我现在正在查看asset-pipeline plugin，似乎文件只能require 其他相同类型的文件，这意味着我现在有两棵依赖树（CSS 和 JS）而不是一棵，这是一个问题，因为存在相互依赖关系，例如，bootstrap.js 依赖于 bootstrap.css。

asset-pipeline 插件是否允许声明类型间依赖关系？如果没有，处理这个问题的最佳方法是什么？

【问题讨论】：

asset-pipeline 插件的重点是将所有 js 文件合并到一个缩小文件中，将所有 css 文件合并到一个缩小文件中。因为，您将整个 js/css 内容交付在一个文件中（全部），没有任何理由声明依赖关系，因为所有内容都交付给客户端。可以在资源插件中定义依赖项的原因是，它不会一次发送所有 js / css 内容，而是基于每个页面......这在做资产管道时显然不是必需的。
这听起来不对，因为你可以在不同的页面上包含不同的 JS 文件，每个都有不同的依赖关系。除此之外，在您拥有的所有页面中包含每个页面的 CSS 和 JS 似乎是个坏主意：为什么我需要 CSS 或 JS 用于除我所在的页面之外的任何页面？它只会减慢页面加载速度。
当然，您可以在不同的页面中包含不同的 js 文件，但如果您这样做，asset-pipeline 对资源插件没有任何好处。性能点的反面是正确的：只有一个 js 文件与第一个请求一起加载，后续页面根本不会加载任何 js，因为浏览器缓存。此外，一开始只发出一个 http 请求，而不是为每个页面发出大量请求（浏览器只能并行进行有限数量的查询）。在这里发挥作用的是 HTTP 标头与有效负载的比率。
这值得深思，谢谢。
我在使用资产管道时太缺少资源插件的那个功能

标签： grails asset-pipeline

【解决方案1】：

我不认为这是一个问题。分别组织 JS 和 CSS 文件（即使它们属于同一个包/产品，例如 Bootstrap）是一件好事，如果 JS 无法引用 CSS，请更改 URI。

在我看来，如果您想将 Bootstrap 与 Grails 一起使用，请尝试 twitter-boostrap。

查看我关于 Bootstrap CSS templating in Grails 的博客文章，如果您想要一个示例，请查看我使用 Twitter Bootstrap here 完成的项目。

【讨论】：