2

サードパーティのスクリプトを開発しています。スクリプトが埋め込まれているページに独自のスタイルシートを追加しています。現在、スタイルはJavaScriptの長い文字列です。これはばかげていますが、スタイルリンクを追加して別のhttpリクエストを作成するよりも高速です。

Facebook SDKを見ると、ファイル名の配列であるこのようなことを行うphpスクリプトがJS_FILESありCSS_FILESます。

// all.js
foreach ($JS_FILES as $file) {
  echo file_get_contents($file);
}

$css = '';
foreach ($CSS_FILES as $file) {
  $css .= file_get_contents($file);
}
// css URLs are relative to facebook domains
$css = preg_replace('#url\(/#', 'url(http://static.ak.fbcdn.net/', $css);
echo 'FB.Dom.addCssRules(' . json_encode($css) . ', ["pkg"])';

そのため、cssはJSONに変換されFB.Dom.addCssRules、ページにスタイルを追加する関数に送信されます。

JS文字列でcssを書くのはばかげています。私は自分のスタイルでSCSSを利用したい、構文を強調したい、そして合理的な環境で開発したい。

このことを実現するために、アセットパイプライン/スプロケット/チルトに接続するにはどうすればよいですか？

私はクレイジーで優れたルビー開発者ではないので、コード例は大きなプラスです。

編集：アセットパイプラインのドキュメントを確認しましたが、実際にフックする方法が見つかりませんでした。私が見る唯一のオプションは、デフォルトの変換を呼び出し、出力をJS文字列に変換して関数に送信するTranfsormクラスを作成することです。どうすればいいのかよくわかりません。.jscssパイプラインを狂わせずにファイルを要求できるかどうかはわかりません。もう1つのオプション（非常によく似ています）は、Black Coffeeのような宝石を書くことです。これも、これをどのように実装すればよいかわかりません。

4

3 に答える 3

4

これを実現するために、新しいテンプレートエンジンは必要ない場合があります。代わりに、javascriptファイルでいくつかのヘルパーメソッドを使用できます。#evaluateを使用して、特定のCSSファイルをインラインでレンダリングできます。その結果はjavascriptをエスケープする必要があります。sprocketsのドキュメントによると、jsテンプレートでSprockets環境コンテキストクラスにフックすることでヘルパーを含めることができます。したがって、「inline.css」にコンパイルされるcssファイルがあると仮定すると、ActionView :: Helpers :: JavaScriptHelperを含めて、次のようにすることができます。

# css_string.js.erb
<% environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper } %>
css_string = "<%= escape_javascript(evaluate('inline.css')) %>";
于 2012-09-26T02:34:09.060 に答える
3

スプロケットは、この問題を解決するのに理想的ではありません。醜くてランダムに失敗するコードを書くことになります（私はイライラする個人的な経験から話しRails.application.assets.find_asset()ます）。

代わりに、JSではない依存関係（CSSおよびMustache / Handlebarsテンプレートなど）を使用してJavascriptを作成し、本番用に最適化された単一ファイルにすべてを構築するために、RequireJS+テキストプラグインを調べてください。

RequireJSは、requires-rails gem / engineを使用して、開発と本番環境でRailsと簡単に統合できます。

同じアプリでSprocketsとRequireJSを使用できますが、依存関係のメカニズムと同じファイル/依存関係のチェーンを混在させないように注意して//= require ...くださいdefine([...], function(...){})。

于 2012-09-29T20:51:20.347 に答える
2

@rosstaはあなたをここで正しい軌道に乗せたと思います。ただし、いくつかの変更をお勧めします。まず、スタイルシートをsassで記述していて、コンパイルされたcssをjavascriptに挿入したい場合は、次の方法でそれを実現できます。

<%= escape_javascript(Rails.application.assets.find_asset('inline').to_s.chomp) %>

inline.css.scssアセット検索パスのどこにありますか。このメソッドfind_assetはsassをコンパイルし、出力を文字列として返します。1つの問題は、これを含めるjavascriptは、javascriptファイル自体が変更されない限り、または明示的inline.cssに依存関係としてマークしない限り、再コンパイルされないことです。ディレクティブを含めることでこれを行うことができます

//= depend_on inline.css
于 2012-09-27T03:11:15.580 に答える