Microsoft Ajax Minifier 將 js 和 css 檔案最小化
- 2010-07-08
- 15515
- 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 寫,原因很簡單!沒碰過得東西總是想玩玩嘛
回應討論