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 アドレスを介してプロジェクトにそれらを導入することでしたが、これは非常に洗練されていません:

• プロジェクトでは多くのサードパーティ コンポーネントが使用される場合があり、それぞれをフォークするのは非常に面倒です
• 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: を理解するのは素晴らしいことです。