2010-12-08 58 views
3

我有一個網站,它使用了很多jquery/javascript。現在,在網站的首頁我已經包含在頭約10 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> 

由於遊客數量逐漸變大,我開始思考這一切的表現。我已經閱讀過,最好是縮小所有JavaScript文件並將它們集中在一起,因此瀏覽器只能創建一個HTTP請求。我這樣做了。現在我有everything.js文件包含所有的JavaScript,包括jquery,插件和我的自定義腳本。

<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或取消註釋所有舊代碼。有了這種工作流程,很容易忘記一些事情並犯一個錯誤。

問題:是否有自動化的東西,可以採取這種頭痛?有些東西可以讓我像過去那樣編輯我的單獨文件,並且在我準備好測試我的更改時縮小和拉開所有內容。

我使用PHP5和SVN

SOLUTION

感謝你的幫助,大家好,我發現我的解決方案: 我會放一個post-commit鉤在我的SVN回購協議,將採取一切我的.js文件,把它們放在一起,並使用YUI壓縮器縮小它們。然後,在我的腳本中,我將fork爲包含,這樣在開發環境中,該站點將包含單獨的javascript文件,但在生產中將包含組合和縮小文件。

+0

你可以編寫一個shell腳本來爲你做這件事,在一個特定的目錄中收集所有`.js`文件,然後梳理並壓縮結果。 – Gumbo 2010-12-08 10:12:58

+0

我認爲你應該檢查你的腳本是否在一個文件中工作正常。 – 2010-12-08 10:13:30

回答

5

我們有定製的部署腳本照顧它。簡而言之,它會使用YUI Compressor縮小所有CSS和JavaScript文件,並將它們打包成最多兩個文件,一個通用文件和另一個文件具有給定頁面的特定邏輯。完成後,我們創建一個符合鏈接(或者一個新的文件夾,取決於項目)到打包文件的文件夾,並且新的更改會立即傳播。這種方法被用於除開發之外的所有環境。

縮小之前,這是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 

我們就像這種方法一樣,因爲它不需要任何額外的代碼來進行即時處理。這只是每兩週進行一次生產的部署問題。我們的分期環境每天更新,有時甚至每天更新一次,而且我們還沒有任何問題。

-1

創建一個PHP文件中像這樣並將其保存在您的JS merger_js.php目錄

<?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; 

調用您的Java這樣

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

現在你的JavaScript文件被壓縮發送到瀏覽器。確保你的服務器可以處理的gzip(通常這是默認安裝)

希望這有助於

+1

合併在哪裏? – Gumbo 2010-12-08 10:14:50

1

我認爲你應該檢查,如果當他們在一個文件腳本正在確定,然後壓縮該文件。 我們沒有很多文件,因此我們使用yui compressor的每個文件使用js縮小器。 如果您使用的是自動部署,則應該執行縮小和部署,否則批處理腳本應該沒問題。