ホームページ > 記事 > ウェブフロントエンド > Sprockets Processor を使用して CSS から Google Font_html/css_WEB-ITnose を削除する
Web アプリケーションに Rails を使用する場合、コンポーネント ファイルを手動でアセットにコピーしたり、他の人がパッケージ化した gem を使用したりするのと比較して、基本的にサードパーティのフロントエンド コンポーネントを使用することになります。 bower-rail などのツールを使用すると、これらの依存関係ファイルをより安心して管理できます。
一部のコンポーネントの CSS では、Google Fonts などの CDN @import を通じて依存関係が導入される場合があります。これは本来、開発者にとって非常に便利なものですが、いくつかのよく知られた理由により、URL 経由で導入された一部のスタイル ファイルにアクセスできない、またはアクセスが非常に遅く、スタイルは通常 Web ページの先頭で導入されるため、 Web ページ全体がアクセスできなくなります。アクセスできないスタイルシートのリクエストは、エラーが発生するか読み込みが完了するまでブロックされるため、読み込みが非常に遅くなります。
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
以前のアプローチは、コンポーネント コードをフォークし、アクセスに影響を与えるリソースを削除し、GIT アドレスを介してプロジェクトにそれらを導入することでしたが、これは非常に洗練されていません:
? Sprocketsの情報を調べてみると、Processorというものがあり、これが便利そうだった。 Processor の call メソッドは、:data を含むハッシュを返すことができます。これは、処理されたアセット コンテンツを次のプロセッサに転送するために使用されます。
def self.call(input) input[:cache].fetch("my:cache:key:v1") do # Remove all semicolons from source input[:data].gsub(";", "") endend
注: 文字列を直接返すことは、{ data: str } を返すことと同じです
class ChinaSprocketsProcessor GOOGLE_FONT_PAT = /@import\s+url\(.*?googleapis.*?\);?/ BOOTCDN_PAT = /@import\s+url\(.*?bootstrapcdn.*?\);?/ def self.call(input) data = input[:data].gsub(GOOGLE_FONT_PAT, '').gsub(BOOTCDN_PAT, '') { data: data } endendSprockets.register_postprocessor 'text/css', ChinaSprocketsProcessor
このコードを config/initializers/assets.rb に追加すると、CSS ファイル内の googleapis および bootstrapcdn への参照が削除されます。コンポーネント コードを自分で変更する必要はありません。まだ要件を満たしています:clap|type_1_2: を理解するのは素晴らしいことです。