close

YUI Builder 是 Yahoo 所開發的一套基於 ANT 技術的 YUI 元件(Component) build tool。

它能夠為 YUI 元件開發者，提供以下幾個建構功能

  • 對 Javascript 原碼進行「壓縮(YUI Compress)」 與「校驗 (JSLint)。
  • 對 CSS 原碼進行「壓縮(YUI Compress)」。
  • 將多個 JS 檔或 CSS 檔合併成單一個檔案 (在 YUI3 中，通常會將所有子模組的 JS 檔合併成父模組同名的一個 js 檔)。
  • 除了會自動複制一份原檔外，尚會為此檔建位壓縮檔(同檔名以 -min 結尾) 與 debug 檔 (同檔名以 -debug 結尾，保留 YAHOO.log 或 Y.log 程式碼，以方便除錯)。
  • 其他有的沒的。

如果你使用 YUI2 或 YUI3 套件來開發你的 Javascript 元件，則可以考慮使用這套 build 工具，將會為你省掉不少事情。

YUI Builder 的安裝步驟，其實在它的 readme 文件上已經寫的很清楚明白了，因此以下的安裝步驟主要是依據笨鳥本身安裝時的過程來撰寫，也就是以笨鳥的角度來看安裝 YUI Builder 這件事。(請注意，這篇文章撰寫時的 YUI Builder 版本為 1.0.0b1)。

  1. 下載並安裝 Ant，版本需 1.7.0 以上。 (笨鳥使用 1.8.2 版)。
    • 下載 binary 壓縮檔。
    • 將解開後的目錄放置到你規劃的磁碟路徑上。(笨鳥是放在 C 槽，因此整個路徑是 C:\apache-ant-1.8.2)。
    • 設定環境變數，【我的電腦】->【內容】->【進階】->【環境變數】。
      • 在「使用者變數」中加入【ANT_HOME】，其值指向Ant 目錄(以笨鳥為例，是指向 C:\apache-ant-1.8.2)。
      • 在「系統變數」中的【Path】值裏，多加入Ant 目錄裏的 bin 目錄 (以笨鳥為例為 C:\apache-ant-1.8.2\bin)。
    • 進入命令列視窗，執行【ant -version】，若能得出版本編號，則代表已經安裝成功了。
    • 加入額外的 ant task library。(此步驟可省略)
      在命令列下，到 ANT_HOME 目錄下執行【ant -f fetch.xml -Ddest=system】。
    • 安裝完成。
      以上請參考 Ant 文件。另外，在安裝 Ant 前請確定已經安裝了 Java (JDK 或 JRE)。
  2. 下載並安裝 YUI Builder (目前版本為 1.0.0b1)
    • 到官網下載壓縮檔。
    • 將解開後的目錄放置到你規劃的磁碟路徑上。(笨鳥是放在 C 槽，因此整個路徑是 C:\builder_1.0.0b1)。
    • 安裝完成。
  3. 若 JS 檔裏有中文，因為預設使用 JVM 或作業平台的編碼，因此若你的 JS 檔為 UTF-8 編碼的中文檔，則需要進行以下的步驟。
    • 進到 YUI Builder 的目錄內 (以上面為例為 C:\builder_1.0.0b1\componentbuild)，其內的目錄結構為
      • 2.x (放置 build YUI2 使用的 ant 編輯檔)
      • 3.x (放置 build YUI3 使用的 ant 編輯檔)
      • docs (YUI builder 中，properties.xml 與 targets.xml 兩個 ant 編輯檔的說明文件)
      • files  (YUI 的模版檔，在 build 過程中使用來產生合併檔或元件註冊檔)。
      • lib     (放置 ant 用到的 jar 檔，其中包含額外 task 需使用的 jar 檔)。
      • shared (放置共用的 ant 編輯檔)
      • templates (放置 YUI2 與 YUI3 的ant 範例編輯檔)

    • 在同目錄下，開啟 module.xml，然後到 shared 目錄下，開啟除 properties.xml 外的所有檔案。
      檢查這些檔案內，符合下列條件的標籤，加上這兩個屬性【encoding="${inputEncoding}" outputencoding="${outputEncoding}"】 
      • concat tag。
      • loadfile tag。
      • 含有 filter 相關 tag 的 copy tag。
      • module.xml 內，name 為 builddebug 的 target tag 之內的 fixcrlf tag。
      • replaceregexp tag，只需要加 encoding="${inputEncoding}" 即可。
      • 照以上四點改完後仍不行的話，就只能追 xml code，然後設阻斷 tag (任意一個未定義的 tag name)，然後看產出的檔案編碼對不對，若不對則在對相關的 tag 設上編碼的屬性。

    •  開啟 shared 目錄下的 properties.xml 檔案
      • 找出 <property> name 為「yuicompressor.css.args」與「yuicompressor.js.args」在其 value 內的值最後加上
        【(空格) --charset ${inputEncoding} (空格)】

        此設定是為了讓 YUI Compressor 在壓縮時遇到內容有中文時，不致於發生亂碼。

      • 在上述 tag 之前加入
        <property name="inputEncoding" value="utf-8"/>
        <property name="outputEncoding" value="utf-8"/>

    • 由於 JSLint 的不安全的編碼列表，會將中文字編碼含入，因此要進行排除。
      • 開啟【lib\jslint】目錄下的【fulljslint.js】檔。
      • 找出其 unsafe character 的變數【cx】。
      • 在編碼字串的後端加上

        &&[^\uff00-\uffef]&&[^\u2e80-\u2eff][^\u3000-\u303f][^\u31c0-\u31ef]&&[^\u3400-\u4db5]&&[^\u4E00-\u9FA5]&&[^\u9fa6-\u9fbb]&&[^\uf900-\ufa2d]&&[^\ufa30-\ufa6a]&&[^\ufa70-\ufad9]&&[^\u200000-\u2a6d6]&&[^\u2f800-\u2fa1d]

        因此該行最後會變成

        cx = /[\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff&&[^\uff00-\uffef]&&[^\u2e80-\u2eff][^\u3000-\u303f][^\u31c0-\u31ef]&&[^\u3400-\u4db5]&&[^\u4E00-\u9FA5]&&[^\u9fa6-\u9fbb]&&[^\uf900-\ufa2d]&&[^\ufa30-\ufa6a]&&[^\ufa70-\ufad9]&&[^\u200000-\u2a6d6]&&[^\u2f800-\u2fa1d]]/,
         
  4. (2011-03-16 補充)
    剛發現當子模組的 js 組成父模組的 js 時，for YUI3 的 template (files\moduletemplate.txt 與 files\rolluptemplate.txt) 都有 @VERSION@ 沒被替換到，而 for YUI2 的 template (files\versioncode.txt) 則有 @VERSION@ 與 @BUILD@ 兩個未被替換到。

    請打開【shared\macrolib.xml】，先找到【<macrodef name="addmodule">】與【<macrodef name="addrollup">】，然後在其內 <copy> 中的 <filterset> 裏，加入【<filter token="VERSION" value="${version}"/>】，之後我們只要在 ant 的編輯檔內加入 version 的變數即可 (在 xml 檔是用 <property name="version" value="x.x.x" />，在 properties 檔是用 version=x.x.x.x，笨鳥是加在 build.properties)。

    再在同一個檔案內找【<macrodef name="registerversion">】，然後在其內 <replacetokens> 中加入【<token key="VERSION" value="${version}"/>】與【<token key="BUILD" value="${build}"/>】，接著只要同上所述的加入 version 與 build 兩個變數即可，這段笨鳥因為沒有用 YUI2，所以就沒加囉~~

以上…打完收功！！

 

參考資料：

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大笨鳥 的頭像
    大笨鳥

    大笨鳥的私房菜

    大笨鳥 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄