3

我使用 grails 快一年了。从现在开始,当我想在 gsp 中链接 css 或 js 文件时。我做了以下事情:

  1. 我在 web-app 文件夹下创建了一个新文件(例如资源文件),并将所有文件夹文件放在那里(例如,当导入引导程序时,我在资源下有一个父文件夹引导程序,在引导程序下有 css、img 和 js 文件夹他们的文件)。

  2. 然后,要导入一个 css 文件,我执行了以下操作(这里是此文档):

<link rel="stylesheet" href="${resource(dir: 'resources/bootstrap/css', file: 'bootstrap.min.css')}" type="text/css">

<script src="${resource(dir: 'resources/bootstrap/js', 文件: 'bootstrap.min.js')}"></script>

这很好用,但是当我尝试在 grails 2.2.4 中创建一个新项目时,我遇到了资源未找到错误(404 到浏览器,以下是控制台)。

ERROR resource.ResourceMeta  - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta  - Resource not found: /resources/bootstrap/js/bootstrap.min.js
ERROR resource.ResourceMeta  - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta  - Resource not found: /resources/bootstrap/js/bootstrap.min.js

当我意识到控制台中的这些错误一次来自资源功能时,一次来自客户端(浏览器)请求的 GET。

在查看资源插件时,我看到他们建议使用 js 和 css 文件夹。在这两个目录中拆分工具(例如 twitter bootstrap)有意义吗?

4

5 回答 5

1

好的,我相信我有一个(半)可行的解决方案:

假设我们需要同时包含 Twitter Bootstrap 3 和 TinyMce

在 webapp 目录下,我创建以下目录:

resources/bootstrap/
resources/bootstrap/css/
resources/bootstrap/css/bootstrap.min.css
resources/bootstrap/fonts/
resources/bootstrap/fonts/glyphicons-halflings-regular.eot
resources/bootstrap/fonts/glyphicons-halflings-regular.svg
resources/bootstrap/fonts/glyphicons-halflings-regular.ttf
resources/bootstrap/fonts/glyphicons-halflings-regular.woff
resources/bootstrap/js/
resources/bootstrap/js/bootstrap.min.js
resources/jquery/
resources/jquery/jquery-2.0.3.min.js
resources/tiny_mce/
resources/tiny_mce/langs/ /*many files here*/
resources/tiny_mce/plugins/ /*many files here*/
resources/tiny_mce/themes/ /*many files here*/
resources/tiny_mce/utils/ /*many files here*/
resources/tiny_mce/tiny_mce_popup.js
resources/tiny_mce/tiny_mce_src.js
resources/tiny_mce/tiny_mce.js

然后我在 ApplicationResources.groovy 中声明我的资源

modules = {
    application {
        resource url:'js/application.js'
    }

    jquery {
        resource url:'resources/jquery/jquery-2.0.3.min.js'
    }

    bootstrap {
       dependsOn 'jquery'
       resource url:'resources/bootstrap/css/bootstrap.min.css'
       resource url:'resources/bootstrap/js/bootstrap.min.js'
    }

    tinymce {
        resource url:'resources/tiny_mce/tiny_mce.js'
    }
}

在 Config.groovy

grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*']   /*no changes here*/
grails.resources.adhoc.excludes = ['/**/langs/**/*.*', '/**/themes/**/*.*']  /*to permit some Ajax calls from tiny_mce.js to relevant resources*/
grails.resources.debug=true 
/* 
this is why I call my solution SEMI working. 
If set grails.resources.debug to false, TinyMce is NOT working because the above excludes are not active, and I receive 404 errors
*/

然后,在 main.gsp

<!DOCTYPE html>
    <head>
        <g:javascript library="application"/>
        <g:javascript library="bootstrap"/>
        <g:javascript library="tinymce"/>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title><g:layoutTitle default="Grails"/></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
        <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
        <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">

        <r:layoutResources />
        <g:layoutHead/>
    </head>
    <body>
        <div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div>
        <g:layoutBody/>
        <div class="footer" role="contentinfo"></div>
        <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>

        <r:layoutResources />
    </body>
</html>

在 index.gsp 中

<head>
...
<script type="text/javascript">
$(function() {
    tinymce.init({selector:'textarea'});
});   
</script>
</head>
<body>
...
<h1>Welcome to Grails</h1>
check bootstrap - start
    <span class="glyphicon glyphicon-search"></span>
    <button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-star"></span> Star
    </button>
check bootstrap - stop

<textarea>Your content here.</textarea>
...
</body> 

使用上面的,我有完全可操作的 JQuery、Bootstrap3 和 TinyMCE 但是如果我在 Config.groovy 中设置

grails.resources.debug=true 

我收到与grails.resources.adhoc.excludesTinyMce 在页面加载后动态获取的资源相关的 404 错误。

有什么线索吗?我真的很接近找到解决方案,所以我很高兴得到您的意见 这个测试项目可以从这里下载:https ://docs.google.com/file/d/0B8epX7R4j7jeaVh5OTFiQlV4V0U/edit?usp=sharing

于 2013-09-12T07:58:36.877 回答
1

该问题的另一个答案如下:

  1. 清理你的项目
  2. 更改“BuildConfig.groovy”并使用更新版本的资源插件
  3. 对您的项目执行刷新依赖项

现在一切都很好

于 2014-02-13T15:49:26.977 回答
0

我开始认为最灵活的方法是通过在 Tomcat / Grails 前面使用代理(例如 Nginx)来提供静态内容(对于所有“资源/*”URI)并让 Grails 处理所有动态内容(对于其余的 URI)。

毕竟,使用 Nginx 提供静态文件应该比让 Tomcat / Grails 更有效。

但是,事后想想,Resources Plugin 迫使你将资源拆分到三个目录中应该是很遗憾的——并且在使用 Ext.js、WYSIWIG 编辑器等包含无数文件的简单场景中驱动 Grails 很麻烦......

于 2013-09-11T14:52:24.550 回答
0

/css/js目录是资源插件添加到的默认“临时资源”模式的一部分Config.groovy。如果您想为静态资源使用不同的结构,则必须创建资源定义文件(例如 . BootstrapResources.groovy)或将目录结构添加到 adhoc 模式中:

// What URL patterns should be processed by the resources plugin
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/resources/*']

这将使/web-app/resources临时资源中的所有内容都受到资源插件的处理。

于 2013-09-11T14:03:08.637 回答
0

I had the same issue, I don't know exactly what setup you have but I have this at the top of my mail.gsp-page:

<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.css')}" type="text/css">

(Inside the -tag)

If you need to import .js-files this is what works for me:

<script src="${resource(dir: 'js', file: 'bootstrap.js')}"></script>

This is at the very bottom om the page inside the -tag.

I'm using Grails 2.1.1.

于 2013-09-11T13:42:45.733 回答