W programie Visual Studio 2013, jak zminimalizować JavaScript i CSS w kroku po kompilacji

Question

W programie Visual Studio 2013, jak zminimalizować JavaScript i CSS w kroku po kompilacji? Chciałbym, aby każdy plik css i js kompresował do pliku .min.js lub .min.css w tym samym folderze.

Nie chcę sprawdzać zminimalizowanych plików, ale po prostu je generować po kompilacji.

Answer 1

Za pomocą Microsoft Ajax Minifier można utworzyć skrypt programu Power Shell, aby utworzyć minified wersje wszystkich plików w danym folderze i dodać go do zdarzeń Post-build.

Przykład plików js (będzie podobny do CSS):

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

Sprawdź również stronę z pełną listą command line switches np .: -map tworzy źródłowy plik mapy.

Answer 2

Wszystkie znalezione rozwiązania wymagały użycia różnych nazw plików dla zminimalizowanych wersji i wiele dodatkowych czynności, aby przełączać się między używaniem wersji normalnej/minifikowanej.

Zamiast tego chciałem, aby skompresowane pliki JavaScript miały oryginalne nazwy, więc nie musiałem zmieniać odniesień w moim znaczniku HTML. Mogłem używać normalnych plików Javascript w moim środowisku programistycznym, a następnie zminimalizowane wersje byłyby automatycznie wdrażane podczas publikowania.

Znalazłem proste rozwiązanie, które właśnie to robi. Najpierw zainstaluj .

Następnie w pliku projektu Visual Studio, tuż przed tagiem zamykającym </Project> dodać następujące:

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

Co powyższy kod zrobić? Po opublikowaniu w Visual Studio ten kod znajdzie każdy plik .js i .css w Twoim źródle i utworzy zminimalizowaną kopię przy użyciu rozszerzenia .jsMIN i .cssMIN. Zignoruje pliki, które są już zminimalizowane. Następnie skopiuje te zminimalizowane pliki do folderu wdrażania przy użyciu oryginalnych nazw plików.

Voilà! Właśnie opublikowaliście zminimalizowane pliki JS/CSS, podczas gdy oryginalne pliki pozostają nienaruszone w środowisku programistycznym.

Opcjonalnie:
Chcesz Miniznik Ajax do spakowania z projektem? Z folderu instalacji Ajax Minifier można przenieść AjaxMin.dll i AjaxMinTask.dll bezpośrednio do katalogu źródłowego. Umieszczam je w folderze App_Data. Gdy znajdą się gdzieś w źródle, w Visual Studio kliknij je prawym przyciskiem myszy, wybierz Include in Project, a także zmień ich właściwość Build Action na None.

Następnie w kodzie I zawarte powyżej, zmiana
<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
do
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" />
Gotowe.

Końcówka rozwiązywanie problemów:
Główny kod powyżej wykonuje AfterBuild i tylko wtedy, gdy konfiguracja jest Release. To tak, że będzie działać tylko podczas publikowania.Jeśli twoja konfiguracja nazywa się coś innego lub chcesz, aby działała w innych okolicznościach, zmodyfikuj kod w razie potrzeby.