3

私はほぼ1年間grailsを使用しています。今からcssまたはjsファイルをgspにリンクしたいとき。私は次のことをしました：

  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', file: 'bootstrap.min.js')}"></script>

これはうまくいきましたが、grails 2.2.4 で新しいプロジェクトを作成しようとすると、Resource not found エラー (ブラウザでは 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

私が気づいたように、コンソールのこれらのエラーは、1 回はリソース関数から、もう 1 回はクライアント (ブラウザ) が要求した GET からのものでした。

リソース プラグインを見ると、js および css フォルダーの使用が提案されていることがわかります。これらの 2 つのディレクトリにツール (たとえば、twitter ブートストラップ) を分割することは意味がありますか?

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 エラーを受け取りました。

手がかりはありますか？私は解決策を見つけるのに非常に近いので、あなたの意見をお待ちしております。

于 2013-09-12T07:58:36.877 に答える