Kohana 3：モジュール「kohana-static-files」

フレームワークに慣れるとき、私が最初に見ているのはその機能ではなく、それが提供する既製のソリューションです。特に、JS / CSSファイルをパーツに簡単にアセンブルし、クライアントの最適化の推奨事項（YSlow / Google PageSpeed）に従って「与える」機能。 Django（実際にはインスピレーションを受けた）でさえ、私が見た実装を見なかったので、Kohana v.3のすぐに使えるモジュールとして決定することにしました。

したがって、モジュールの開発前に配置された基本的なニーズ/ウィッシュリストについて説明します。
1）インラインCSS / JSを1つずつ作成する
2）ページコードに挿入するか、一意の名前のファイルを生成してディスクに書き込むことにより、ポイント1を付与する機能。
3）1つのビルドで外部CSS / JSファイルをアセンブルする機能
4）ポイント3からの1つまたは別のビルドが接続される条件、およびその他の外部ファイルを指定する機能（

  <！-[IE 7の場合]>

）
5）静的を別のドメインに移動する機能。主なことは、同じ物理サーバー上にあることです。
6）CDNを使用する
7）CSS / JSの最小化。
8）最も重要な：METHOD。これにより、再配布可能なモジュールに静的（および通常はCSS / JSだけでなく、たとえば画像も）を含めることができます。現在の方法なので、モジュール機能自体がモジュール/に転送および接続され、静的が任意の場所DOCUMENT_ROOTにコピーされるか、前提条件はモジュールがDOCUMENT_ROOTにあることです。
9）ルーティングと競合しないように静的なURLを簡単に変更する機能は、たとえば、スタイルシートを使用して実際に既存のディレクトリを作成したときに、「/ css /」というURLにCSSセクションを作成したい場合は役に立ちません。

つまり将来的に何らかの合意に至り、それに従う必要があります。
考案されたものの多くは、実際に機能するモジュールで具体化されました。

モジュールへのリンクを与えるだけでなく、モジュールの動作を示すために、単純なタスクをその前に置いてみます。
1） css-framework.ruをベースとして
2）「kohana-static-files」モジュールに基づいてcss-framework.ru/demo/css-framework-layout.htmlの例を実装してみてください。

私はそれを試した最も多くの人々に興味があるので、モジュールをゼロからデプロイする方法を描きます。例えば、経験豊富なkokhanovodyが私を許してくれます。

これを行うには、Kohana v.3の最新バージョンをダウンロードします。
DOCUMENT_ROOTの上にシステム、アプリケーション、モジュールディレクトリを転送し、それに応じて、index.phpのパスを変更します。

<? php $application = '../application'; $modules = '../modules'; $system = '../system'; * This source code was highlighted with Source Code Highlighter .

次に、 github.com / aberdnikov / kohana-static-filesから最新バージョンを選択し、コンテンツをモジュールにコピーします。
ファイルapplication / bootstrapper.phpでモジュールを接続します

<? php Kohana::modules ( array ( // 'auth' = > MODPATH.'auth', // Basic authentication // 'cache' = > MODPATH.'cache', // Caching with multiple backends // 'codebench' = > MODPATH.'codebench', // Benchmarking tool // 'database' = > MODPATH.'database', // Database access // 'image' = > MODPATH.'image', // Image manipulation // 'orm' = > MODPATH.'orm', // Object Relationship Mapping // 'oauth' = > MODPATH.'oauth', // OAuth authentication // 'pagination' = > MODPATH.'pagination', // Paging of results // 'unittest' = > MODPATH.'unittest', // Unit testing // 'userguide' = > MODPATH.'userguide', // User guide and API documentation ' kohana-static-files' = > MODPATH.' kohana-static-files ', // Static Files (JS/CSS/pictures) )); ? > * This source code was highlighted with Source Code Highlighter .

モジュール「kohana-static-files」の初期化ファイルで、モジュールKohana :: find_file（）に従って「/!/static/style.css」への最初の呼び出しで見つかるモジュールのルーティングを規定します。
-最初のアプリケーション/静的ファイル/ style.css
-その後、modules / {module_name} /static-files/style.css（{module_name}はbootstrapper.phpの接続順序で接続されたモジュールの反復です）
-そして、システム/静的ファイル/ style.cssでのみ。

したがって、クラス、ビュー、構成などのネイティブディレクトリの隣に、新しい種類の「静的ファイル」ディレクトリが表示されていることに気づきました。ここに静的ファイルを追加します。トピックの冒頭のパラグラフ9ウィッシュリストについて思い出します。結局のところ、記述されたモジュールを使用して特定のサイトの特定の所有者が選択する静的ファイルのディレクトリはわかりません。

契約番号1
そのため、ファイル「cssf-base.css」では、URLを含む行を探して編集し、絶対URLと相対URLを置き換えます。または、先頭を自動置換「{staticfiles_url}」のサブストリングで、タイプのストリングから
.corners-2 em.tl、.corners-2 em.tr、.corners-2 em.bl、.corners-2 em.br {幅：4px; 高さ：4px; background-image：url（../ i / corners / corners-2.png）; }
ゲットしなきゃ
.corners-2 em.tl、.corners-2 em.tr、.corners-2 em.bl、.corners-2 em.br {幅：4px; 高さ：4px; background-image：url（{staticfiles_url} i / corners / corners-2.png）; }
その後
url（{staticfiles_url} i / corners / corners-2.png）;
のようなものになります
url（http://static.site.ru/!/static/i/corners/corners-2.png）;

契約番号2
静的ファイルの名前の競合を回避するには、次の原則に従って配置する必要があります。
1）モジュールの場合、モジュールの名前と一致する名前のディレクトリにそれぞれ配置する必要があります。ニュースモジュールスタイルファイルの結果のURLは次のようになります。{staticfiles_url} news / style.css
したがって、ファイルシステム内のこのファイルは、たとえば次の場所にあります。
MODDIR.'news / static-files / style.css '
2）現在のサイトのデザインでは、サブディレクトリなしで静的変数を配置する必要があります。たとえば、サイトのデザインのメインスタイルシートにはURLがあります
{staticfiles_url} /style.css
そして、そのパスは次のようになります。
APPDIR。 ' 静的ファイル/ style.css '

次に進みます：
Kokhanビューを使用できるようにするために、Controller_Templateから継承するベースコントローラーConrtoller_Welcomeを変更します。

ダミーの代わりに

public function action_index() { $this- > request- > response = 'hello, world!'; } * This source code was highlighted with Source Code Highlighter .

タスクを解決するために必要なすべてを追加します。コードは説明なしで明確です。

public function action_index() { StaticCss::instance()- > addCss(Kohana::config('staticfiles.url').'news/style.css'); StaticCss::instance()- > addCssStatic('news/style.css'); StaticCss::instance()- > addCssStatic('css/cssf-base.css'); StaticCss::instance()- > addCssStatic('css/cssf-ie6.css', 'lte IE 6'); StaticCss::instance()- > addCssStatic('css/cssf-ie7.css', 'IE 7'); StaticJs::instance()- > addJsStatic('js/common.js'); StaticCss::instance()- > addCssInline(' .lb-1 .corners { background: #818181; } .lb-2 .corners { background: #9a9a9a; } .lb-3 .corners { background: #b4b4b4; } .lb-4 .corners { background: #dadada; } '); StaticJs::instance()- > addJsInline('CornersInit();'); StaticJs::instance()- > addJsOnload('alert(123)'); } * This source code was highlighted with Source Code Highlighter .

addJsStaticとaddJsの形式のメソッドの違いを説明するだけです。
これらは本質的に同じで、最初のメソッド自体にラッパーが含まれており、構成のプレフィックスをURLの先頭に追加します。ニュース{staticfiles_url} news / style.cssのスタイルシートファイルを使用した例
次のいずれかを実行できます。

StaticCss::instance()- > addCss(Kohana::config('staticfiles.url').'news/style.css'); * This source code was highlighted with Source Code Highlighter .

より簡単な方法で

StaticCss::instance()- > addCssStatic('news/style.css'); * This source code was highlighted with Source Code Highlighter .

また、onloadイベント中に実行されるスクリプトの一部のアセンブリに注意を喚起したいと思います。 jQueryはモジュールでメインのJSフレームワークとして受け入れられるため、呼び出されたとき

StaticJs::instance()- > addJsOnload('alert(123)'); * This source code was highlighted with Source Code Highlighter .

フォームの構造が生成されます：

< script language ="JavaScript" type ="text/javascript" > jQuery( document ).ready( function (){ alert(123) } ); </ script > * This source code was highlighted with Source Code Highlighter .

つまりラッパー（「jQuery（ドキュメント）.ready」）を作成したり、デフォルトでjQueryを接続したりする必要はありません。addJsOnloadを初めて追加すると、jQueryが接続されます。Kohana_StaticJsクラスには特別なneedJquery（）メソッドがあります。もちろん、インターネットにアクセスせずにイントラネットでモジュールを使用する場合は、StaticJsのneedJquery（）メソッドを再定義して、ディスクからファイルをインクルードします。

そして今、私たちは部品のモジュール構成に注意を向けます

'js' = > array( // 'min' = > true, // (external, inline, onload) 'build' = > false, ), 'css' = > array( // 'min' = > true, // (external, inline) 'build' = > true, ), * This source code was highlighted with Source Code Highlighter .

この場所では、コンテンツタイプ（JS / CSS）、タイプ（外部、インライン、オンロード）、条件（

  <！-[IE 7の場合]>

）、
最小化（コメント、余分なスペース、改行の削除）。

契約番号3
接続ファイルの前のURLにサブストリング「.min」がある場合-すでに圧縮されていると見なされ、圧縮オプションが有効になっている場合でも、このファイルは無視され、ビルドをビルドするオプションが有効になっている場合。その後、「現状のまま」のビルドに適切に追加されます。

'path' = > realpath(DOCROOT), * This source code was highlighted with Source Code Highlighter .

これは、静的ドメインのDOCUMENT_ROOTディレクトリです。デフォルトでは、同じドメインです。

// 'url' = > '/!/static/', // 'cache' = > '/!/cache/', * This source code was highlighted with Source Code Highlighter .

ここで、感嘆符の存在についてコメントしたいと思います。これは、ウィッシュリストのパラグラフ9、紛争およびそれらとの戦いについてまさに当てはまります。

'host' = > 'http://'.$_SERVER['HTTP_HOST'], * This source code was highlighted with Source Code Highlighter .

これは、実際には、静的が配布されるドメインです。ユースケース：
1） ""-リンクは次のようになります： "/pic.jpg"
2）「 ya.ru 」-リンクは次のようになります。「 ya.ru/pic.jpg 」
* Coral CDNを使用するには
*現在のドメインの名前に「.nyud.net」という接尾辞を追加し、static
*たとえば、ドメイン「google.com」に対してホスト「google.com.nyud.net」を設定します
*詳細はこちら： habrahabr.ru/blogs/i_recommend/82739 3）“ ya.ru.nyud.net ”-リンクは次のようになります：“ ya.ru.nyud.net/pic.jpg ”

既に生成された応答で自動修正を使用できるように、コントローラーのafterメソッドをわずかに変更します。

public function after() { parent::after(); $this- > request- > response = str_replace('{statifiles_url}', STATICFILES_URL, $this- > request- > response); } * This source code was highlighted with Source Code Highlighter .

さて、最後に、プレゼンテーションデバイスについて説明します（表示）
YSlow / GooglePageSpeedが推奨するように、ヘッドセクションにCSSを挿入します

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head profile ="http://gmpg.org/xfn/11" > < title > css-framework / layout-box </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta http-equiv ="imagetoolbar" content ="no" /> < link rel ="icon" href ="{statifiles_url}favicon.ico" type ="image/x-icon" /> < link rel ="shortcut icon" href ="{statifiles_url}favicon.ico" type ="image/x-icon" /> <? php echo StaticCss::instance () - > getCssAll(); ? > </ head > * This source code was highlighted with Source Code Highlighter .

そして、閉じる前に、JS insertsを呼び出します

<? php echo StaticJs::instance () - > getJsAll(); ? > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

私の意見では、モジュールはタスクに対処しました：
-HTTPリクエストの数を減らしました。
-CDNはオプションで接続されています。
-ページの上部にCSSが挿入されます。
-JSはページの最後に挿入されます。
-必要なファイルのみが接続されます（個別に、またはビルドにより）（小さな欠点もあります-すべてのユースケースに対して個別のビルドが作成されます）。
-インラインスタイルとスクリプトをプラグインファイルにすることができます。
-スクリプトとスタイルの重複した接続は除外されます。

ここで、指定された静的（gzip、ETags、Expires）の正しいヘッダーを配置するために、nginxを呼び出す必要があります。

ここでモジュールをピックアップ/フォークできることをもう一度思い出します：
github.com/aberdnikov/kohana-static-files

念のため、モジュールの操作の結果として何が起こったかを示します（水平スクロールなしでHTMLを表示するために手動で改行のみを入力しました）

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head profile ="http://gmpg.org/xfn/11" > < title > css-framework / layout-box </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta http-equiv ="imagetoolbar" content ="no" /> < link rel ="icon" href ="http://static.site.ru/!/static/favicon.ico" type ="image/x-icon" /> < link rel ="shortcut icon" href ="http://static.site.ru/!/static/favicon.ico" type ="image/x-icon" /> < link rel ="stylesheet" href ="http://static.site.ru/!/cache/css/3/7/3741c0ac0c2f8409beea116d6f4d6922.css" media ="all" type ="text/css" />   < link rel ="stylesheet" href ="http://static.site.ru/!/cache/css/inline/e/c/ec905aaa7ee63d90a646593b7e665936.css" media ="all" type ="text/css" /> </ head > < body > ... [skip html code] ... < script language ="JavaScript" type ="text/javascript" src ="http://static.site.ru/!/cache/js/8/e/8e022d3b6bcba59dcba5c586d408f7b2.js" ></ script > <script language= "JavaScript" type= "text/javascript" src= "http://static.site.ru/!/cache/js/inline/b/2/b2044b150de0ef43233d3491d060a5f6.js" ></script> <script language= "JavaScript" type= "text/javascript" src= "http://static.site.ru/!/cache/js/onload/1/5/15fb097828dd52d44bf36e77a96144b6.js" > </ script > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

PS：静的を配布するためのユーザーガイドモジュールのアイデアとの主な違いは、複雑なビルドが最初の要求で個別の要求としてページコードから呼び出される前にすぐに生成され、単純な静的が最初にHTTP経由でアクセス可能なディレクトリにコピーされることですリクエスト、そしてそれは既にウェブサーバーによって与えられていますが、PHPを通してではありません。
つまりデプロイは最初のリクエストで行われます。
欠点のうち、ビルドの名前が接続されたファイルの名前から取得されるため（そうでない場合はモジュールの速度に大きく影響する）、ビルド名がコンテンツに基づいて取得されるインラインスタイル/スクリプトの場合にのみ、ビルドの作成元のファイルへの変更を自動的に検出することは不可能です。

したがって、更新するときは、ビルドとキャッシュを含む/！/ディレクトリを強制終了します。

計画には、静的（アセンブリを必要としない）の自動展開のためのメソッドの追加と、負荷が大きくなる前にキャッシュをウォームアップするためのアドバイスが含まれます。

Kohana 3：モジュール「kohana-static-files」

More articles: