Clever Geek Handbook

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" > <br> < html xmlns ="http://www.w3.org/1999/xhtml" > <br> < head profile ="http://gmpg.org/xfn/11" > <br> < title > css-framework / layout-box </ title > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> <br> < meta http-equiv ="imagetoolbar" content ="no" /> <br> < link rel ="icon" href ="{statifiles_url}favicon.ico" type ="image/x-icon" /> <br> < link rel ="shortcut icon" href ="{statifiles_url}favicon.ico" type ="image/x-icon" /> <br> <? php echo StaticCss::instance () - > getCssAll(); ? > <br> </ head > <br> <br> * This source code was highlighted with Source Code Highlighter .





そしお、閉じる前に、JS insertsを呌び出したす

<? php echo StaticJs::instance () - > getJsAll(); ? > <br> </ body > <br> </ html > <br><br> * 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" > <br> < html xmlns ="http://www.w3.org/1999/xhtml" > <br> < head profile ="http://gmpg.org/xfn/11" > <br> < title > css-framework / layout-box </ title > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> <br> < meta http-equiv ="imagetoolbar" content ="no" /> <br> < link rel ="icon" href ="http://static.site.ru/!/static/favicon.ico" type ="image/x-icon" /> <br> < link rel ="shortcut icon" <br> href ="http://static.site.ru/!/static/favicon.ico" <br> type ="image/x-icon" /> <br> < link rel ="stylesheet" <br> href ="http://static.site.ru/!/cache/css/3/7/3741c0ac0c2f8409beea116d6f4d6922.css" <br> media ="all" type ="text/css" /> <br> <!--[lte IE 6]><link rel="stylesheet" <br> href="http://static.site.ru/!/cache/css/lte-ie-6/1/6/161456642f5cfc18e731472d29293b28.css" <br> media="all" type="text/css" /><![endif]--> <br> <!--[IE 7]><link rel="stylesheet" <br> href="http://static.site.ru/!/cache/css/ie-7/c/b/cb4a089038b23dd1bfc5d0dfbfd35a68.css" <br> media="all" type="text/css" /><![endif]--> <br> < link rel ="stylesheet" <br> href ="http://static.site.ru/!/cache/css/inline/e/c/ec905aaa7ee63d90a646593b7e665936.css" <br> media ="all" type ="text/css" /> <br> </ head > <br> < body > <br> ... [skip html code] ...<br> < script language ="JavaScript" <br> type ="text/javascript" <br> src ="http://static.site.ru/!/cache/js/8/e/8e022d3b6bcba59dcba5c586d408f7b2.js" ></ script > <br> <script language= "JavaScript" <br> type= "text/javascript" <br> src= "http://static.site.ru/!/cache/js/inline/b/2/b2044b150de0ef43233d3491d060a5f6.js" ></script><br> <script language= "JavaScript" <br> type= "text/javascript" <br> src= "http://static.site.ru/!/cache/js/onload/1/5/15fb097828dd52d44bf36e77a96144b6.js" > </ script > <br> </ body > <br> </ html > <br> <br> * This source code was highlighted with Source Code Highlighter .







PS静的を配垃するためのナヌザヌガむドモゞュヌルのアむデアずの䞻な違いは、耇雑なビルドが最初の芁求で個別の芁求ずしおペヌゞコヌドから呌び出される前にすぐに生成され、単玔な静的が最初にHTTP経由でアクセス可胜なディレクトリにコピヌされるこずですリク゚スト、そしおそれは既にりェブサヌバヌによっお䞎えられおいたすが、PHPを通しおではありたせん。

぀たり デプロむは最初のリク゚ストで行われたす。

欠点のうち、ビルドの名前が接続されたファむルの名前から取埗されるためそうでない堎合はモゞュヌルの速床に倧きく圱響する、ビルド名がコンテンツに基づいお取埗されるむンラむンスタむル/スクリプトの堎合にのみ、ビルドの䜜成元のファむルぞの倉曎を自動的に怜出するこずは䞍可胜です。



したがっお、曎新するずきは、ビルドずキャッシュを含む//ディレクトリを匷制終了したす。



蚈画には、静的アセンブリを必芁ずしないの自動展開のためのメ゜ッドの远加ず、負荷が倧きくなる前にキャッシュをりォヌムアップするためのアドバむスが含たれたす。


More articles:


All Articles