demoshop

demo, trying to be the best_

官方網站
http://aspnet.codeplex.com/releases/view/40584
版本
4.0

現在的網頁為求效果與美觀,經常性的會有一堆的 CSS 和 JS 檔,如果你有使用一些 JS 套件或是 CSS Framework 那每一個頁面所需要載入的 JS 和 CSS 檔案數量更是可觀,當我們在撰寫 CSS 和 JS 檔的時候往往會因為加強維護性而排版(程式碼)使用了許多的斷行與空白,將這些斷行與空白省下來可以大幅增加網頁載入的速度,但是自己手動排是很辛苦又麻煩的,而 Mircrosoft 有推出一套專門作這件事情的套件名稱為 Microsoft Ajax Minifier 利用 Microsoft Ajax Minifier 可以整合 IDE 環境讓壓縮 CSS 和 JS 檔變成自動執行,這是一件多美好的事情阿。

demo廢言先分享一下為什麼 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



demo廢言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 版本和之前的版本一些差異

  1. 預設不會覆蓋已存在檔案必須利用 「–clobber」參數來設定覆蓋。
  2. 預設就會將區域變數重新命名(a、b、c...)如不想修改就需要使用「–rename:none」參數。
  3. 更多的說明還請自行參考 Microsoft Ajax Minifier Documentation -AjaxMinCommandLine
  4. 而這是預設的最小化會作的事情建議也是看一下 AjaxMinDefaultMin

demo廢言這篇文章但書太多了,但也就是因為demo有這需求才會有產出,如果不合用還請見諒,剩下的部份就要來說一下文章不完善的部份。

  1. 首先在專案檔的設定是在每次編譯的時候都做壓縮 JS 的工作,但是編譯是很經常性的事情,因此將觸發改為 Rebuild 的時候再觸發,或是如果你的方案中有許多專案檔,那就可以放到其他的專案檔去比如說像 demo 寫 MVC 的就有一個 Helper 的專案,寫 WebForm 的也可能會有自建的Class專案放在那裡就可以加快平常編譯的速度。
  2. PowerShell 的示範指令中並未針對 CSS 做最佳化的動作,而 Microsoft Ajax Minifier 是可以作到這點的,使用方式也很簡單,去找副檔名是 .css 的就好了....
  3. demo 這是第一次碰 PowerShell 所以寫出來的東西或許很蠢,歡迎各位不吝賜教,至於你問我那為什麼要用 PowerShell 寫,原因很簡單!沒碰過得東西總是想玩玩嘛

 

 

 

分隔線

回應討論