結合JS和CSS文件作爲構建

我想我所有的JS文件串聯到reduce the number of HTTP requests瀏覽器做的一部分，當它進入我的網站。當然，在開發過程中分開保存這些文件仍然是有價值的。被廣泛接受的解決方案是將連接作爲構建的一部分來執行。結合JS和CSS文件作爲構建

連接部分是非常簡單的..但所有的HTML文件，仍然有一堆<script src="*.js">標籤引用預串聯js文件呢？他們現在需要指向單個連接的JavaScript文件。

如何將這些引用替換爲構建的一部分？

來源

2011-09-15 pepsi

基於Ant的一個解決方案可能從這個例子可以得到。我將插入標準免責聲明，即用正則表達式「解析」HTML可能不是一個好主意。

的想法是：

刪除或轉換爲註釋所有<script>標籤。
插入一個引用您的合併Javascript的標籤<script>。

我已經在</body>結束標記之前插入了單個js，但您可以根據需要調整它。這裏的源文件位於一個名爲「髒」的目錄下;在一個被稱爲'乾淨'的調整文件。

<property name="single.js" value="single.js" /> 
<copy todir="clean" overwrite="true"> 
    <fileset dir="dirty" /> 
    <filterchain> 
     <tokenfilter> 
      <replaceregex 
      pattern="(&lt;)(\s*SCRIPT\s+SRC=['&quot;][^'&quot;]+['&quot;]\s*)/(&gt;)" 
      replace="\1!--\2--\3" 
      flags="gi"/> 
      <replaceregex 
      pattern="(&lt;/BODY&gt;)" 
      replace="&lt;SCRIPT SRC=&quot;${single.js}&quot; /&gt;${line.separator}\1" 
      flags="i"/> 
     </tokenfilter> 
    </filterchain> 
</copy>

來源

2011-09-16 06:15:10

有一個名爲minify的Google項目：http://code.google.com/p/minify/這可能正是你要找的。要做到這一點

來源

2011-09-15 20:54:54 endyourif

的方法之一是讓HTML載入只是一個腳本，但在開發該腳本僅僅是強制使用該技術listed here其他個人腳本加載各種各樣的「包裝」。在生產中，該腳本的內容被替換爲所有腳本的聯合（最好通過某些服務器端串聯）。

來源

2011-09-15 20:56:20

根據您使用的技術，您可以在您的html中使用一個JS引用，將一個目錄中的所有JS文件連接成一個JS文件的處理程序。然後，您可以在開發期間輕鬆管理單個文件，並在運行時受益於一個HTTP請求。那裏有插件可以壓縮JS，刪除空白並緩存結果，但是依賴於你的技術。

來源

2011-09-15 20:56:45

你可以使用modconcat這是apache的插件。它有助於像這樣輕鬆地連接文件。

來自：

<head> 
    <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" /> 

    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" /> 

    <link rel="stylesheet" href="/css/forms.css" type="text/css" media="screen" /> 
</head>

到：

<head> 
    <link rel="stylesheet" href="/css/reset.css,master.css,forms.css" type="text/css" media="screen" /> 
</head>

來源

2011-09-16 02:10:52

設有一個圖書館稱爲wro4j可以用來作爲構建時間的解決方案（Maven插件）或運行時解決方案（過濾器），並幫助您保持一個描述所有的資源單個位置就這麼簡單：

<script src="script1.js"> 
<script src="script2.js"> 
<script src="script3.js"> 
... 
<script src="script99.js">

：

<groups xmlns="http://www.isdc.ro/wro"> 
    <group name="all"> 
    <css>/asset/*.css</css> 
    <js>/asset/*.js</js> 
    </group> 
</groups>

這樣，您就可以在HTML代碼將所有資源引用

到

<script src="all.js">

免責聲明：這是有偏頗的回答，因爲我在做這個項目。

來源

2011-09-16 07:43:57

結合JS和CSS文件作爲構建

回答

相關問題