3

画像スライダーをアクティブにするJavaScriptをアプリケーションに1つ含めました。スクリプトは次のとおりです。

    $(function(){var scroller=$("#scroller div.innerScrollArea");var scrollerContent=scroller.children("ul");scrollerContent.children().clone().appendTo(scrollerContent);var curX=0;scrollerContent.children().each(function(){var $this=$(this);$this.css("left",curX);curX+=$this.width()});var fullW=curX/2;var viewportW=scroller.width();var controller={curSpeed:0,fullSpeed:2};var $controller=$(controller);var tweenToNewSpeed=function(newSpeed,duration){if(duration===undefined){duration=600}$controller.stop(true).animate({curSpeed:newSpeed},duration)};scroller.hover(function(){tweenToNewSpeed(0)},function(){tweenToNewSpeed(controller.fullSpeed)});var doScroll=function(){var curX=scroller.scrollLeft();var newX=curX+controller.curSpeed;if(newX>fullW*2-viewportW){newX-=fullW}scroller.scrollLeft(newX)};setInterval(doScroll,20);tweenToNewSpeed(controller.fullSpeed)});

手動で縮小しました。このアプリをHerokuにアップロードすると、500の内部サーバーエラーが発生します。Herokuログで、これを確認できます：

    2013-01-02T04:50:59+00:00 app[web.1]: Completed 500 Internal Server Error in 640ms
    2013-01-02T04:50:59+00:00 app[web.1]: 
    2013-01-02T04:50:59+00:00 app[web.1]: ActionView::Template::Error (slider.js isn't precompiled):
    2013-01-02T04:50:59+00:00 app[web.1]:     1: <footer class="footer">
    2013-01-02T04:50:59+00:00 app[web.1]:     2: <%= javascript_include_tag "slider" %> 
    2013-01-02T04:50:59+00:00 app[web.1]:     3: </footer>

そこで、production.rbに次の行を追加して、プリコンパイルするjavascriptを追加しました。

 config.assets.precompile += %w( slider.js )

それで、私のアプリはロードされましたが、JavaScriptが機能しませんでした。ソースを確認すると、HerokuがJavaScriptをどのようにコンパイルしたかがわかります。

$(function(){var a=$("#scroller div.innerScrollArea"),b=a.children("ul");b.children().clone().appendTo(b);var c=0;b.children().each(function(){var a=$(this);a.css("left",c),c+=a.width()});var d=c/2,e=a.width(),f={curSpeed:0,fullSpeed:2},g=$(f),h=function(a,b){b===undefined&&(b=600),g.stop(!0).animate({curSpeed:a},b)};a.hover(function(){h(0)},function(){h(f.fullSpeed)});var i=function(){var b=a.scrollLeft(),c=b+f.curSpeed;c>d*2-e&&(c-=d),a.scrollLeft(c)};setInterval(i,20),h(f.fullSpeed)});

その混乱。私の質問は、これを修正する方法ですか？他のスクリプトとcssファイルをコンパイルするにはherokuが必要です。ただし、このファイルのみを除外します。どうやってするの？

4

1 に答える 1

1

多くの人は、Herokuにアセットをプリコンパイルさせるのではなく、プッシュする前に自分でプリコンパイルする方がよいと考えています。これにより、コンパイルされたアセットをローカルでチェックし、発生する可能性のあるエラーを修正してから、動作することがわかっているものをHerokuにプッシュすることができます。

これは、リポジトリで次のように実行できます。

rake assets:precompile

また、既存のプリコンパイル済みアセットをクリアするには（プリコンパイル前にこれを実行することをお勧めします）。

rake assets:clean

「混乱」に関しては、実際に起こったことは、ミニファイアが変数名を短いものに交換したことです。これは何年にもわたってミニファイアにとって正常な動作であり、何かが壊れている可能性は低いですが（可能です）。アセットをローカルでプリコンパイルし、それが問題かどうかをテストする理由があります。

于 2013-01-02T08:49:23.503 に答える