Microsoft Ajax Minifier 將 js 和 css 檔案最小化
- 2010-07-08
- 15726
- 0
- 版本
- 4.0
現在的網頁為求效果與美觀，經常性的會有一堆的 CSS 和 JS 檔，如果你有使用一些 JS 套件或是 CSS Framework 那每一個頁面所需要載入的 JS 和 CSS 檔案數量更是可觀，當我們在撰寫 CSS 和 JS 檔的時候往往會因為加強維護性而排版（程式碼）使用了許多的斷行與空白，將這些斷行與空白省下來可以大幅增加網頁載入的速度，但是自己手動排是很辛苦又麻煩的，而 Mircrosoft 有推出一套專門作這件事情的套件名稱為 Microsoft Ajax Minifier 利用 Microsoft Ajax Minifier 可以整合 IDE 環境讓壓縮 CSS 和 JS 檔變成自動執行，這是一件多美好的事情阿。
先分享一下為什麼 Microsoft Ajax Minifier 早就已經被寫爛了 demo 現在還要寫，原因很簡單，市面上的範例都不符合我的需求，而且我認為我的需求一定也有其他人有相同需求，因此我才寫這篇文章出來，demo的需求很簡單，在專案中並非所有 js 我都想執行最小化的工作，因此專案目錄中會有一個資料夾名稱為script放置所有的js檔案，還有一個子資料夾為JSSource 用來放置需要最小化的 js，參考了「http://www.asp.net/ajaxLibrary/AjaxMinQuickStart.ashx」改不出來怎麼讓最小化的 js 換資料夾輸出，後來又看到了「http://www.dotblogs.com.tw/asdtey/archive/2010/04/18/ajaxminifier.aspx」就決定使用 PowerShell 來玩了。
本文是利用 Powershell來執行呼叫的媒介。如果你從來沒有使用過 PowerShell 那需要先設定使用權限，不然會無法使用，為求再來的教學流程方便，所以就先告訴各位如何開啟 PowerShell 的使用權限。
因為demo的電腦是Windows7所以就很直接的Key PowerShell 就可以找到 PowerShell了，點選後開啟
請注意點選32位元的 PowerShell因為Visual Studio 是32位元的
直接輸入「Set-ExecutionPolicy RemoteSigned」後再輸入「Y」就可以開啟本機權限了，想了解詳細權限設定可以參考這裡「Set-ExecutionPolicy」
PowerShell權限開啟後，接者就要來寫一個 ps1 檔，來操作最小化 JS (本範例只針對 js 做壓縮)
$jsPath="D:\projects\tiv\Solutions\MvcApplication\Scripts\JSSource\";
$fileList = dir $jsPath -include *.js -recurse
$oupssssPath=($jsPath+"..\");
foreach ($file in $fileList)
{
$baseName=$file.BaseName;
$fullname = $file.DirectoryName + "\" + $baseName;
'C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier 4\ajaxmin.exe' -h -js "$fullname.js" -o ($oupssssPath+$baseName+".min.js") -clobber
}
來稍微解釋一下上面這些玩意是啥，第一行的 $jsPath 這個變數是一定需要修改的，請輸入你的專案目錄位置。其他的就都可以不用管了，執行後會將你輸入的位置底下所有 js 檔作最小化的動作，然後將檔案後面加上.min 存放到上一層目錄中。
為求示範方便請將檔案放置於C槽底下並且命名為minifile.ps1
使用文字編輯器開啟你的專案檔（.csproj）搜尋「BeforeBuild」加上以下的敘述
<Target Name="AfterBuild">
<Exec Command="PowerShell -NoProfile -c .\minifile.ps1" IgnoreExitCode="true" WorkingDirectory="C:\"> </Exec>
<Warning Condition="$(ScriptExitCode)==2" Text="Warning: The PowerShell script raised a warning during execution." />
<Error Condition="$(ScriptExitCode)==1" Text="Error: The PowerShell script raised an error during execution." />
</Target>
怕各位不知道位置在哪貼張圖吧
這樣子當你編譯了以後就會執行剛剛上面寫的 PowerShell 來完成最小化的動作，並且會將相關資訊顯示在輸出（Output）窗格中。
說明一下 Microsoft Ajax Minifier 4.0 版本和之前的版本一些差異
- 預設不會覆蓋已存在檔案必須利用 「–clobber」參數來設定覆蓋。
- 預設就會將區域變數重新命名（a、b、c...）如不想修改就需要使用「–rename:none」參數。
- 更多的說明還請自行參考 Microsoft Ajax Minifier Documentation -AjaxMinCommandLine。
- 而這是預設的最小化會作的事情建議也是看一下 AjaxMinDefaultMin
這篇文章但書太多了，但也就是因為demo有這需求才會有產出，如果不合用還請見諒，剩下的部份就要來說一下文章不完善的部份。
- 首先在專案檔的設定是在每次編譯的時候都做壓縮 JS 的工作，但是編譯是很經常性的事情，因此將觸發改為 Rebuild 的時候再觸發，或是如果你的方案中有許多專案檔，那就可以放到其他的專案檔去比如說像 demo 寫 MVC 的就有一個 Helper 的專案，寫 WebForm 的也可能會有自建的Class專案放在那裡就可以加快平常編譯的速度。
- PowerShell 的示範指令中並未針對 CSS 做最佳化的動作，而 Microsoft Ajax Minifier 是可以作到這點的，使用方式也很簡單，去找副檔名是 .css 的就好了....
- demo 這是第一次碰 PowerShell 所以寫出來的東西或許很蠢，歡迎各位不吝賜教，至於你問我那為什麼要用 PowerShell 寫，原因很簡單！沒碰過得東西總是想玩玩嘛
回應討論