在構建過程中集成js

Question

我想知道什麼是最好的方法來縮小和連接我所有的js腳本在一個構建過程中。我有實際的縮小工作，但現在需要在我的html頁面中爲縮小文件設置參考。在dev版本中，它引用了五個連接起來的文件。我應該突出xmlpoke或類似的東西？是否有更優雅的技術？

Answer 1

的方式，我usally做到這一點是CONCAT所有文件一起，縮小使用衣：

<target name="compress-js" unless="disable.js.compression"> 
    <java fork="true" spawn="true" jar="tools/yuicompressor-2.3.6/yuicompressor-2.3.6.jar"> 
     <arg value="-o" /> 
     <arg value="${js.home}/lib/lib.js" /> 
     <arg value="${js.home}/lib/lib.js" /> 
    </java> 
    </target> 

，然後只是有一個標題引用的壓縮文件，並在開發中使用disable.js.compression所以你的文件不會被壓縮。

Answer 2

在你的文件，其中包含腳本文件，這樣做（使用您所使用的過服務器端技術）

<% 
if (@IS_DEV@){ 
%> 
    <script src="file1"></script> 
    ... 
    <script src="file5"></script>  
<% 
} else { 
%> 
    <script src="@MINIFIED_FILE_PATH@"></script> 
<% 
} 
%> 

然後使用你的構建文件中的「替換」螞蟻目標（假設你使用ant）更換@ IS_DEV @和@ MINIFIED_FILE_PATH @

<replace file="yourfile.jsp" token="@IS_DEV@" value="${IS_DEV}"/> 
<replace file="yourfile.jsp" token="@MINIFIED_FILE_PATH@" value="${YOUR_MINIFIED_FILE_PATH}"/> 

Answer 3

您可以使用Buildr

創建package.json文件在您的項目的根目錄，使它看起來像這樣：

{ 
    "name": "My Project Name", 
    "buildr": { 
     "compress": { 
      "js": true, 
      "css": true, 
      "img": false 
     }, 
     "bundle": { 
      "js": true, 
      "css": true 
     }, 
     "directories": { 
      "out": "./scripts/compressed", 
      "src": "./scripts/uncompressed" 
     }, 
     "files": { 
      "js": true, 
      "css": true, 
      "img": false 
     } 
    } 
} 

然後運行：

buildr 

以上將壓縮並在./scripts/uncompressed目錄中的所有CSS和JS文件打包到/腳本/ compressed`。目錄。

更新：更正了GitHub上Buildr的URL。