15

私は Rails を初めて使用し、資産を整理する最善の方法を見つけるのに苦労しています。この質問の目的は、私の考えをまとめ、意見を求め、時間をかけてドキュメントを進化させることです。おそらくいつか Rails ガイドになるかもしれません。(Rails Wiki は廃止されたようです。) これは、初心者向けの概念化を支援するものであり、参照用ではないため、最も一般的なシナリオに限定されます。

アセット パイプライン - 概要

パイプラインの目的、利点、および内部の仕組みの詳細については、次のガイドから始めてください: http://guides.rubyonrails.org/asset_pipeline.html ここでは、目的に関連するビットのみを要約します。

パイプラインが必要な理由は次のとおりです。

  1. コンパイル:高水準言語 (ERb、Haml、Sass、LESS、CoffeeScript...) をプレーンな CSS/JS にコンパイルします。

パイプラインのその他の利点は次のとおりです。

  1. 連結:複数のファイルを 1 つに結合して、クライアントのパフォーマンスを向上させます。
  2. 縮小:空白やその他の巧妙な最適化を削除して、ファイル サイズを縮小します。
  3. フィンガープリント:ファイル内容の MD5 ハッシュをファイル名に追加して、変更時にキャッシュが強制的にファイルを再度フェッチするようにしました。

アセット パイプライン - デフォルトのファイルシステム レイアウト

  • app|lib|vender/assets/- パイプラインによって処理されるファイルを対象としています。
  • app/assets/- アプリケーション用に作成したファイル専用です。
  • lib/assets/- 複数のアプリケーション間で共有するために作成したファイルを対象としています。
  • vendor/assets/- jQuery や Twitter Bootstrap など、他のユーザーによって作成されたファイルを対象としています (ただし、/vender に直接インポートされるのではなく、gem によって提供されることがよくあります)。
  • public/- ここにあるファイルはそのまま残され、Web アプリのルート パス (「/」) から直接取得できます。

アセット パイプライン - デフォルトのファイルと動作

アプリ/資産/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

アプリ/アセット/スタイルシート/application.css

/*
 *= require_self
 *= require_tree .
 */

public/404.html
public/robots.txt
...

Gemfile

...
gem 'jquery-rails'
...

新しい Rails アプリのデフォルト設定を使用して、アセット パイプライン コンパイラが行うことは次のとおりです。

  1. デフォルトでは、コンパイラはapplication.js、application.css、およびすべての非 JS/CSS ファイル (主に画像) を処理します。
  2. 2 つのアプリケーション ファイルには、スプロケット ディレクティブ (= で始まるコメント行) が含まれています。Sprockets は、Rails アセット パイプラインのコンパイルを強化するライブラリです。これらのディレクティブは、含めるファイルを一覧表示するため、マニフェストとも呼ばれます。
  3. application.js2 つの jquery ファイル (アプリではなく jquery-rails gem に存在する) を取得するマニフェストが含まれており、 .app/assets/javascripts/を介してツリー内のすべてのファイルを取得しますrequire_tree .。このマニフェストを介して含まれるすべてのファイルは、 という単一のファイルにコンパイルされapplication-[the MD5 hash].js、 に配置されpublic/assets/ます。
  4. application.cssapp/assets/stylesheets/を介してツリー内のすべてのファイルを取り込むマニフェストが含まれていますrequire_tree .。このディレクティブは、CSS コンテンツをファイル自体に、ディレクティブの順序でrequired_self含めるようコンパイラーに指示します。application.cssしたがって、この場合、CSSapplication.cssは残りの上に表示されます。このマニフェストを介して含まれるすべてのファイルは、 という単一のファイルにコンパイルされapplication-[the MD5 hash].css、 に配置されpublic/assets/ます。
  5. app/assets ツリー内のすべての非 JS/CSS ファイル (主に画像) もフィンガープリントされpublic/assets/、ディレクトリ構造はそのままで に配置されます。たとえば、 のようにapp/assets/images/categories/computers.pngなりpublic/assets/categories/computers-[the MD5 hash].pngます。

アセット内依存シナリオの概念化

画像

イメージ間に依存関係はなく、常に独立しています。

スタイルシート

  • CSS: CSS ファイルは相互にインポートできます。これは、パスが正しい限り機能しますが、おそらく最適な手法ではありません。
  • Sass: Sass ファイルは相互にインポートでき、変数と mixin を共有できますが、Sass である場合(CSS にコンパイルした後ではなく)、Sass imports 経由でのみ可能です。application.css.scss'a' と 'b' を必要とするsprockets ディレクティブがある場合、それらはマージ前に別々のコンテキストでコンパイルされます。変数と mixin を共有するには、Sass インポート ディレクティブを使用して、'a' から 'b' をインポートするか、その逆を行う必要があります。(以下の主要コンセプト 1 を参照してください。)
  • LESS: [これについて十分に知りません。]

JavaScript

  • JS: JavaScript コンポーネントには相互依存関係があります (例: Twitter Bootstrap は jQuery を使用します)。ただし、それらはすべて実行時にブラウザーで解決されるため、すべてのコンテンツが最終的にブラウザーによって読み込まれる限り、プロジェクト内のファイルをどのように整理/結合するかは問題ではありません。
  • CoffeeScript: [これについてはよくわかっていません。]

ヘルパーの振る舞い - Rails ビュー

TODO

ヘルパーの振る舞い - Sass

TODO

ベスト プラクティス - 主要な概念

  1. パイプラインは、本番用のアセットを準備するためのものです。アプリケーション自体ではなく、展開システムの一部と考えてください。アプリの論理構造を自分で確立し、その構造で正しく動作するようにスプロケットを構成します。

ベスト プラクティス - 一般的なアセット シナリオ

TODO

ベスト プラクティス - 一般的に役立つデフォルトの概要

TODO

** 質問 **

4

0 に答える 0