Trong Visual Studio 2013, làm cách nào để rút gọn Javascript và CSS trong bước hậu xây dựng

Question

Trong Visual Studio 2013, làm cách nào để rút ngắn Javascript và CSS trong bước sau khi xây dựng? Tôi muốn có mọi tệp nén css và js đơn lẻ thành một tệp .min.js hoặc .min.css trong cùng một thư mục.

Tôi không muốn kiểm tra các tệp đã được rút gọn, nhưng thay vì chỉ tạo chúng sau khi tạo.

Answer 1

Với Microsoft Ajax Minifier bạn có thể tạo tập lệnh PowerShell để tạo phiên bản được rút gọn của tất cả các tệp trong thư mục đã cho và thêm vào sự kiện Post-build.

Ví dụ cho các tập tin js (nó sẽ tương tự cho css):

Get-ChildItem *.js -Exclude *.min.js | 
    Foreach-Object{ 
    $file = [io.fileinfo]$_.Name 
    ajaxmin $file.Name -out "$($file.Name).min$($file.Extension)" 
} 

Kiểm tra cũng một trang với danh sách đầy đủ của command line switches ví dụ .: -map tạo ra tập tin bản đồ nguồn.

Answer 2

Tất cả các giải pháp tôi tìm thấy bắt buộc bằng cách sử dụng tên tệp khác nhau cho các phiên bản thu nhỏ và nhiều công việc phụ để chuyển đổi giữa sử dụng phiên bản thông thường/rút gọn.

Thay vào đó, tôi muốn các tệp JavaScript được nén có tên gốc nên tôi không phải thay đổi các tham chiếu trong đánh dấu HTML của mình. Tôi có thể sử dụng các tệp Javascript bình thường trong môi trường phát triển của mình, sau đó các phiên bản thu nhỏ sẽ tự động được triển khai khi xuất bản.

Tôi đã tìm thấy một giải pháp đơn giản thực hiện điều đó.

Trước tiên, hãy cài đặt Microsoft Ajax Minifier.

Sau đó, trong Visual Studio tập tin dự án của bạn, ngay trước thẻ đóng </Project> thêm như sau:

<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" /> 
<Target Name="AfterBuild" Condition="'$(ConfigurationName)'=='Release'"> 
    <ItemGroup> 
    <JS Include="**\*.js" Exclude="**\*.min.js;obj\**\*.*" /> 
    <CSS Include="**\*.css" Exclude="**\*.min.css;obj\**\*.*" /> 
    </ItemGroup> 
    <AjaxMin 
    JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".jsMIN" 
    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".cssMIN" /> 
</Target> 
<PropertyGroup> 
    <CopyAllFilesToSingleFolderForPackageDependsOn> 
    CustomCollectFiles; 
    $(CopyAllFilesToSingleFolderForPackageDependsOn); 
    </CopyAllFilesToSingleFolderForPackageDependsOn> 
</PropertyGroup> 
<Target Name="CustomCollectFiles"> 
    <ItemGroup> 
    <MinJS Include="**\*.jsMIN" /> 
    <FilesForPackagingFromProject Include="%(MinJS.Identity)"> 
     <DestinationRelativePath>%(RecursiveDir)%(Filename).js</DestinationRelativePath> 
    </FilesForPackagingFromProject> 
    <MinCSS Include="**\*.cssMIN" /> 
    <FilesForPackagingFromProject Include="%(MinCSS.Identity)"> 
     <DestinationRelativePath>%(RecursiveDir)%(Filename).css</DestinationRelativePath> 
    </FilesForPackagingFromProject> 
    </ItemGroup> 
</Target> 

nào mã trên làm gì? Khi bạn xuất bản trong Visual Studio, mã này sẽ tìm thấy mọi tệp .js và .css trong nguồn của bạn và tạo bản sao được rút gọn bằng cách sử dụng tiện ích mở rộng .jsMIN và .cssMIN. Nó sẽ bỏ qua các tệp đã được rút gọn. Sau đó, nó sẽ sao chép các tệp được rút gọn này vào thư mục triển khai, sử dụng tên tệp ban đầu.

Voilà! Bạn vừa xuất bản các tệp JS/CSS được rút gọn, trong khi các tệp gốc của bạn vẫn giữ nguyên trên môi trường phát triển của bạn.

Tùy chọn:
Muốn Ajax Minifier được đóng gói cùng với dự án của bạn? Từ thư mục cài đặt Ajax Minifier, bạn có thể di chuyển AjaxMin.dll và AjaxMinTask.dll trực tiếp vào thư mục nguồn của bạn. Tôi đặt chúng trong thư mục App_Data của tôi. Khi chúng ở đâu đó trong nguồn của bạn, trong Visual Studio, nhấp chuột phải vào chúng, chọn Include in Project và cũng thay đổi thuộc tính Build Action thành None.

Sau đó, trong đoạn code tôi bao gồm ở trên, thay đổi
<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
để
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" />
Xong.

Mẹo khắc phục sự cố:
Mã chính của tôi ở trên thực thi AfterBuild và chỉ khi cấu hình là Release. Vì vậy, nó sẽ chỉ chạy trong khi xuất bản.Nếu cấu hình của bạn được đặt tên khác hoặc bạn muốn cấu hình đó chạy trong các trường hợp khác, hãy sửa đổi mã khi cần.