Wie reduziere ich in Visual Studio 2013 Javascript und CSS im Post-Build-Schritt

Question

In Visual Studio 2013, wie kann ich Javascript und CSS im Post-Build-Schritt minimieren? Ich würde gerne jede einzelne css und js Datei in eine .min.js oder .min.css im selben Ordner komprimieren.

Ich möchte die minimierten Dateien nicht einchecken, sondern sie nur post-build generieren lassen.

Answer 1

Mit Microsoft Ajax Minifier können Sie Powershell-Skript erstellen, um verkleinerte Versionen aller Dateien im angegebenen Ordner zu erstellen und sie zu Post-Build-Ereignissen hinzuzufügen.

Beispiel für js Dateien (es wird für CSS ähnlich sein):

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

prüft auch eine Seite mit vollständiger Liste des command line switches z.B .: -map schafft Quelle Map-Datei.

Answer 2

Alle Lösungen, die ich fand, erforderten die Verwendung verschiedener Dateinamen für die minimierten Versionen und eine Menge zusätzlicher Arbeit, um zwischen den normalen/minimierten Versionen zu wechseln.

Stattdessen wollte ich, dass die komprimierten JavaScript-Dateien die ursprünglichen Namen hatten, sodass ich die Verweise in meinem HTML-Markup nicht ändern musste. Ich könnte die normalen Javascript-Dateien in meiner Entwicklungsumgebung verwenden, dann würden minimierte Versionen automatisch beim Veröffentlichen bereitgestellt werden.

Ich fand eine einfache Lösung, die genau das tut.

Zuerst installieren Sie Microsoft Ajax Minifier.

Dann in Ihrer Visual Studio-Projektdatei, kurz vor dem Schließen </Project> Tag fügen Sie folgend:

<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> 

Was ist der obige Code tun? Wenn Sie in Visual Studio veröffentlichen, findet dieser Code alle .js und .css Datei in Ihrer Quelle, und erstellen Sie eine minimierte Kopie mit der Erweiterung .jsMIN und .cssMIN. Es ignoriert Dateien, die bereits minimiert wurden. Dann kopiert es diese minimierten Dateien unter Verwendung der ursprünglichen Dateinamen in den Deployment-Ordner.

Voilà! Sie haben gerade veraltete JS/CSS-Dateien veröffentlicht, während Ihre Originaldateien in Ihrer Entwicklungsumgebung intakt bleiben.

Optional:
Möchten Sie, dass Ajax Minifier mit Ihrem Projekt kombiniert wird? Im Installationsordner von Ajax Minifier können Sie AjaxMin.dll und AjaxMinTask.dll direkt in Ihr Quellverzeichnis verschieben. Ich habe sie in meinen Ordner App_Data gelegt. Sobald sie sich irgendwo in Ihrer Quelle befinden, klicken Sie in Visual Studio mit der rechten Maustaste darauf, wählen Sie Include in Project und ändern Sie auch ihre Build Action-Eigenschaft in None.

Dann im Code enthalten ich oben, ändern
<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
zu
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" />
Fertig.

Ein Tipp zur Fehlerbehebung:
Mein Hauptcode über AfterBuild ausführt und nur dann, wenn die Konfiguration Release. Das ist so, dass es nur während einer Veröffentlichung läuft.Wenn Ihre Konfiguration anders benannt ist oder unter anderen Umständen ausgeführt werden soll, ändern Sie den Code nach Bedarf.