带有 3rd 方库的 Grails Asset-Pipeline 系统

Posted 2023-05-07

【中文标题】带有 3rd 方库的 Grails Asset-Pipeline 系统

【英文标题】：Grails Asset-Pipeline system with 3rd party libs

【发布时间】：2014-07-05 08:02:01

【问题描述】：

Grails 2.4 现在使用 资产管道 来管理和处理 Grails 应用程序中的静态资产，而不是资源系统。这是相当新的，互联网上还没有太多关于它的文档。

我的问题是，如何正确处理 3rd 方库？

例如，select2 (http://ivaynberg.github.io/select2/) 库将其所有 .css、.js、图像文件放在一个平面文件夹中。

我应该将不同的文件类型复制到它们对应的assets/javascripts/、assets/stylesheets/ 等子文件夹中吗？如何处理 .json、文本或 doc 文件等没有明显位置的文件？

我应该创建一个vendors/select2/ 文件夹吗？在哪里，在assets/ 或web-app/？然后，我应该如何从我的 GSP 中加载所有必要的文件？

这个库也仅在表单视图中需要，因此除非需要，否则不应加载。

【参考方案1】：

Baxxabit 的回答让我找到了解决方案。我一直在为同样的事情苦苦挣扎，但想充分利用管道，以便我可以使用 less-asset-pipeline 插件。

以 bootstrap 为例，我创建了一个 vendor 文件夹作为标准资产文件夹的对等文件夹，然后将 bootstrap 文件放到了那里。

application.js：

//This is a javascript file with its top level require directives
//= require jquery
//= require bootstrap-3.1.1/javascript/bootstrap
//= require_tree views
//= require_self
...

和application.css：

/*
*= require_self
*= require main
*= require mobile
*= require bootstrap-3.1.1/stylesheets/bootstrap
*= encoding UTF-8
*/

要覆盖 boostrap 自定义，我可以简单地将自定义 variables.less 文件拖放到 ./grails-app/assets/vendor/bootstrap-3.1.1/stylesheets/variables.less 中。 assets 下的第一个文件夹在覆盖文件时会被忽略，此后路径需要与您放在 vendor 下的任何内容相匹配。

这给了我这种层次结构：

grails-app/assets/
├── images
...
├── javascripts
│   └── application.js
├── stylesheets
│   ├── application.css
│   ├── bootstrap-3.1.1
│   │   └── stylesheets
│   │       └── variables.less
│   ├── errors.css
│   ├── main.css
│   └── mobile.css
└── vendor
    └── bootstrap-3.1.1
        ├── javascript
        │   ├── bootstrap.js
        │   └── bootstrap.min.js
        └── stylesheets
            ├── alerts.less
...
            ├── variables.less
            └── wells.less

我喜欢这个结果。我已经清楚地描述了分布式包并且相对容易升级，并且我已经将该包的更改分离到一个清晰可识别的自定义文件中。

我在https://github.com/ggascoigne/grails-pipeline-scss 放了一个使用 sass-asset-pipeline 插件的示例。

【讨论】：

你甚至可以将这个结构与凉亭一起使用，不是吗？

优秀的建议应该是官方文档的一部分。如果您有两个以上的库，则为每个库使用清单将有助于进一步扩展。 bower 在这张图片中有一个不错的位置，尽管您仍然需要将内容从 bower_components 复制到 assets。

我将 Bower 用于我的前端资产，您的 github 项目帮助很大。

这对我来说非常有效。似乎缺少文档中的信息（或至少很难找到）。

你可以添加一个 .bowerrc 文件来将 bower 指向你的 assets/vendor 文件夹

【参考方案2】：

您可以在标准文件夹（javascript、样式、图像）附近创建另一个文件夹，如 jsplugins，然后您可以在必要的页面中包含 js 库，如果您不想在所有页面上使用此库。

制作这样的东西：

<assets:javascript src="select2/pathToYourJSFile"/>

注意：您可以省略assets 路径下的第一级路径，在本例中为jsplugins。

最好的方法是使用 manifest.js 文件，您可以在其中通过require 指令包含必要的文件。

您应该使用 assests 文件夹而不是 web-app。在构建 war 文件期间，资产中的所有文件都将被复制到 web-app 文件夹。

来自 Bobby Warner 的有用视频：http://www.youtube.com/watch?v=VHDBlGtAHB4

文档：http://bertramdev.github.io/asset-pipeline/

【参考方案3】：

资产管道对我来说似乎是一个倒退。我显然不能再使用 cdnjs 或类似的 CDN 来访问外部库了。我真的放弃了所有这些来为我自己的 JS 代码进行 JS 缩小吗？

【讨论】：

我认为资产管道文档 (bertramdev.github.io/asset-pipeline/guide/index.html) 中的“从外部存储目录服务资产”可能会对您使用 CDN 有所帮助。

不，我不想将内容复制到 cdnjs，我只想在我的应用中使用 cdnjs 提供的资产。

【参考方案4】：

这对于 assets 文件夹下的资产来说效果很好，但鉴于 Web 组件和 javascript 框架的激增，我们经常发现自己在检查 Grails 项目之外的外部项目，我们希望将这些项目打包并与我们的应用程序一起分发。您还会遇到这样的情况，即应用程序的前端由非 Grails 开发人员的前端开发人员开发，他们使用不同的工具以与 Grails REST 服务断开连接的方式开发和测试前端。

因此，与其将外部项目的资产复制到您的 grails 应用程序中，您如何引用外部文件夹，这将确保在开发期间运行应用程序时，这些资产将包含在您的应用程序中，以及何时WAR 应用程序进行部署？

【参考方案5】：

要处理 3rd 方库，您可以在 assets 文件夹中添加 Flipcountdown 文件夹，

├── 资产 │ ├── 倒计时 │ │ ├── 管理员 │ │ └── 全球 │ ├── 图片 │ │ ├── apple-touch-icon.png │ │ ├── apple-touch-icon-retina.png │ │ ├── favicon.ico │ │ ├── grails_logo.png │ │ ├── 皮肤 │ │ ├── spinner.gif │ │ └── springsource.png │ ├── javascripts │ │ ├── application.js │ │ └── jquery-2.1.3.js │ └── 样式表 │ ├── application.css │ ├── errors.css │ ├── main.css │ └── mobile.css

现在您可以使用普通语法引用 css 和 js，

<assets:javascript src="admin/pathToYourJSFile"/>
<assets:stylesheet src="admin/pathToYourCSSFile"/>
<assets:stylesheet src="global/pathToYourCSSFile"/>