Clever Geek Handbook

ベンダー：CSS / Javascriptミニマリティのイデオロギーチャンピオン

少し前のHabréには、すでにCSS / Javascriptファイルコンビネーターに関する記事がありました： Smarty-Combineのプラグイン 。 これは、ページの読み込みを高速化し、サーバーの負荷を軽減できるため、便利です。 その後、独自のコンビネーター+ミニマイザーを作成するというアイデアが生まれました。これはSmartyプロジェクトだけでなく、一般的に使用できます。 アイデアはベンダーに変わりました。 次の要件を満たしている必要があります。





最初は、 CS-Cartに基づいた1つのプロジェクトのCSS / Javascript読み込みを最適化することがタスクでした（Smartyも使用）。 プロジェクトは一貫して17個のCSSファイルと15個のJavascriptをロードしましたが、これはもちろん価値がありません。 これらのうち、約半分がCS-Cartエンジン自体に、2番目がインストールされたアドオンに該当しました。 CSS / Javascriptを組み合わせて、元のプロジェクトファイルに最小限の変更を加えて実行できるソリューションが必要でした。 アドオン自体は、CSSとJavascriptをロードします。 アドオン自体のロジックには入りたくなかったので、Benderを使用すると、Wordpressと同じようにCSS / Javascriptからキューを作成できます。



ベンダーは、ユニークまたは機能が豊富なふりをしません（ asseticなど）。 ここに別のタスクがあります：最小性（パッカーと一緒にそれは3ファイルのみです）、および既存のプロジェクトへの接続の容易さ。



使い方は？



例として、CSSとJavascriptを組み込んだコードを4行ずつ、それぞれ2つ取り上げます。 



<html lang="en"> <head> <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </head> <body> ... </body> </html>


次にベンダーを追加します。 



 <html lang="en"> <head> <?php require_once "Bender/Bender.class.php"; $bender = new Bender(); //      CSS  JS $bender->enqueue("assets/css/bootstrap.css"); $bender->enqueue("assets/css/bootstrap-theme.css"); $bender->enqueue("assets/js/jquery-1.10.2.js"); $bender->enqueue("assets/js/bootstrap.js"); //   ,        : $bender->enqueue(array("assets/css/bootstrap.css", "assets/css/bootstrap-theme.css", ...)); //     /  CSS <link rel="stylesheet" href="..." />   <head> echo $bender->output("cache/stylesheet.css"); ?> </head> <body> ... <?php //     /  JS <script src="...">  </body> (  ) echo $bender->output("cache/javascript.js"); ?> </body> </html>


ベンダーの結果は次のコードになります。 



 <html lang="en"> <head> <link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/javascript.js"></script> </body> </html>


結果のファイルがすでに作成されている場合、それらは上書きされません。 この動作は、 ttlプロパティを使用して変更できます（以下を参照）。



mimimi出力のCSS / JSファイルは最小化されます。 デフォルトでは、JavascriptはDean Edwardsの「JavaScriptPacker」を使用し、CSSはJoe ScyllaのCssMinを使用します。 これらは非常に良い結果をもたらしますが、将来的には他のミニマイザーを接続することが可能になるでしょう。 また、最小化を完全に無効にすることができます-結果は結合されますが、圧縮ファイルは結合されません。



スマーティー



ベンダーには、Smarty用のプラグインが含まれています。 これを行うには、 function.bender.phpをSmartyプラグインディレクトリに配置するだけで、プロジェクト初期化スクリプトのどこかでBenderクラス自体を除外することを忘れないでください。 Smartyテンプレートでベンダーを使用する： 



 <html lang="en"> <head> {bender src="assets/css/bootstrap.css"} {bender src="assets/css/bootstrap-theme.css"} {bender src="assets/js/jquery-1.10.2.js"} {bender src="assets/js/bootstrap.js"} {bender output="cache/stylesheet.css"} </head> <body> ... {bender output="cache/javascript.js"} </body> </html>


プロパティ



ベンダーには最小限のプロパティがあります。 ここにあります： 



 $bender->cssmin:    "cssmin"    CssMin,      CSS. $bender->jsmin: "packer"   JavaScriptPacker, "jshrink"  JShrink,       JS. $bender->ttl:    .    3600 ,   ,    . 0 -  , -1 -   .


計画中





GitHubからベンダーをダウンロード | 英語の使用方法



コメントの改善、フィードバック、さらには批判に対する提案を歓迎します。 ベンダーという名前はフューチュラマとは何の関係もないと推測したと思います-「コンビネーター」という言葉に由来します。


More articles:


All Articles