2010-12-08 42 views
3

jquery/javascriptをたくさん使用するウェブサイトがあります。訪問者数が大きく成長するJavaScriptの自動化の自動化

<head> 
<script src="/js/jquery.js"></script> 
<script src="/js/jquery_plugin_1.js"></script> 
<script src="/js/jquery_plugin_2.js"></script> 
<script src="/js/jquery_plugin_3.js"></script> 
<script src="/js/my_scripts_1.js"></script> 
<script src="/js/my_scripts_2.js"></script> 
<script src="/js/my_scripts_3.js"></script> 
<script src="/js/my_scripts_4.js"></script> 
<!-- ...and so on --> 
</head> 

ので、私はこのすべてのパフォーマンスについて考え始めています:今、インデックスページで私は頭の中に含まれる約10 JavaScriptファイルを持っています。私は、すべてのjavascriptファイルを1つにまとめて収集することをお勧めします。そのため、ブラウザは1つのHTTPリクエストのみを作成する必要があります。私はそうした。今私はeverything.jsファイルには、jquery、プラグイン、私のカスタムスクリプトを含むすべてのjavascriptが含まれています。

<head> 
<!-- 
<script src="/js/jquery.js"></script> 
<script src="/js/jquery_plugin_1.js"></script> 
<script src="/js/jquery_plugin_2.js"></script> 
<script src="/js/jquery_plugin_3.js"></script> 
<script src="/js/my_scripts_1.js"></script> 
<script src="/js/my_scripts_2.js"></script> 
<script src="/js/my_scripts_3.js"></script> 
<script src="/js/my_scripts_4.js"></script> 
... 
--> 
<script src="/js/everything.js"></script> 
</head> 

いずれかのファイルを変更する必要があるときに楽しいことが始まります。毎回、私の変更が期待どおりに機能しているかどうかを確認するには、ファイルを圧縮してeverything.jsを更新するか、すべての古いコードのコメントを解除する必要があります。この種のワークフローでは、何かを忘れて間違えてしまうのは簡単です。

質問:この頭痛を取り除くことができる自動化されたものはありますか?何か、それは私が前に私の別のファイルを編集することを可能にし、私が変更をテストする準備ができたときにすべてを縮小して引っ張ってくれるでしょうか?

私は

SOLUTION

はあなたの助け、皆をありがとう、私は解決策を見つけたPHP5とSVNを使用しています: 私はすべて取る私のSVNのレポでpost-commitフックを入れます私の.jsファイルをまとめて、YUIコンプレッサを使用してそれらを縮小します。次に、私のスクリプトでは、javascript includeをフォークします。そのため、開発環境では別のjavascriptファイルが含まれますが、実稼働環境では、統合されたミニファイルが含まれます。

+0

あなたのためのシェルスクリプトを書いて、特定のディレクトリ内のすべての '.js'ファイルを収集し、その結果を組み合わせて圧縮することができます。 – Gumbo

+0

私はあなたのスクリプトが1つのファイルにあるときにうまく動いているかどうかチェックするべきだと思います。 –

答えて

5

カスタム配備スクリプトが用意されています。つまり、YUI Compressorを使用してすべてのCSSファイルとJavaScriptファイルを圧縮し、1ページに2つのファイル(一般的なファイルと特定のロジックを持つファイル)を圧縮します。いったん完了すると、パッケージ化されたファイルを含むフォルダへのシンボリックリンク(またはプロジェクトに応じて新しいフォルダ)が作成され、新しい変更が即座に伝播されます。このアプローチは、開発以外のすべての環境で使用されます。

縮小する前に、これはCSSの構造は以下のように(それはJavaScriptが同じ多かれ少なかれだ、それはちょうどあなたのアイデアを与えることです)に見えるものです:

css/Layout/Core/reset.css 
css/Layout/Core/index.css 
css/Layout/Tools/notice.css 
css/Layout/Tools/form.css 
css/Layout/Tools/overlay.css 
css/Skin/Default/Core/index.css 
css/Skin/Default/Tools/notice.css 
css/Skin/Default/Tools/form.css 
css/Skin/Default/Tools/overlay.css 
css/Layout/Tools/gallery.css 
css/Layout/Tools/comments.css 
css/Layout/Tools/pagination.css 
css/Layout/Index/index.css 
css/Skin/Default/Tools/gallery.css 
css/Skin/Default/Tools/comments.css 
css/Skin/Default/Tools/pagination.css 
css/Skin/Default/Tools/achievements.css 
css/Skin/Default/Tools/labels_main.css 
css/Skin/Default/Index/index.css 

後:

minified/1290589645/css/common.css 
minified/1290589645/css/0135f148a7f6188573d2957418119a9a.css 

我々このアプローチのように、その場で処理される追加のコードは含まれていないためです。これは、生産に2週間に1回しか発生しない展開の問題です。私たちのステージング環境は毎日、場合によっては1日に1回以上更新されており、まだ問題はありません。

+0

yuicompressorはurl()型の値(例えば、 'background-image:url(../ foo.jpg)')をうまく扱いますか? URLはCSSファイルからの相対パスであるため、ファイルが圧縮されているときに更新する必要があります。そうしないと、相対参照は正しくありません。 –

+0

正直ではありません。 YUIコンプレッサーがうまく処理しているかどうかは重要ではないロジックが追加されているため、問題はありません。 –

-1

今、あなたのjavascriptのファイルがブラウザにzip形式の送信である。この

<script type='text/javascript' src='js/merger_js.php?f=blackcan.js'></script> 

のようにしてJavaを呼び出すDIR

<?php 
ob_start ("ob_gzhandler"); 
$f=$_GET['f']; 
if(@file_exists($f)){ 
    $inhoud = file_get_contents($f); 
    header("Content-type: application/javascript; charset: UTF-8"); 
    header("Cache-Control: must-revalidate"); 
    $offset = 60 * 60 ; 
    $ExpStr = "Expires: " . 
    gmdate("D, d M Y H:i:s", 
    time() + $offset) . " GMT"; 
    header($ExpStr); 
}else{ 
// file not found, we return empty 
$inhoud= ""; 
} 
print $inhoud; 

をこのようなPHPファイルを作成し、あなたのJSにmerger_js.phpとして保存。あなたは、サーバーがGZIPを処理できることを確認します(通常、これはデフォルトでインストールされている)

希望これは、私はあなたが、彼らは一つのファイルにある場合、あなたのスクリプトがOK作業しているかどうかを確認してから、そのファイルを圧縮すべきだと思う

+1

マージはどこですか? – Gumbo

+0

PHPファイルをmerge.phpとして保存します。 – Grumpy

+0

しかし、何もマージしません。 – Gumbo

1

に役立ちます。 私たちは多くのファイルを持っていないので、yui compressorを使って各ファイルにjsミニライザを使用しています。 自動展開を使用している場合は、縮小と展開を実行する必要があります。そうしないと、バッチスクリプトは正常です。