In Visual Studio 2013, come faccio a ridurre Javascript e CSS nel passaggio post-build

Question

In Visual Studio 2013, come faccio a ridurre Javascript e CSS nel passaggio post-generazione? Mi piacerebbe avere ogni singolo file css e js compresso in un file .min.js o .min.css nella stessa cartella.

Non voglio controllare i file minificati, ma piuttosto li ho generati post-compilazione.

Answer 1

Con Microsoft Ajax Minifier è possibile creare script PowerShell per creare versioni minificate di tutti i file in una determinata cartella e aggiungerlo agli eventi di post-generazione.

Esempio per i file js (sarà simile per css):

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

controllare anche una pagina con l'elenco completo dei command line switches es .: -mappa crea un file di origine mappa.

Answer 2

Tutte le soluzioni che ho trovato richieste utilizzando nomi file diversi per le versioni ridotte al minimo e un sacco di lavoro extra per passare dall'uso delle versioni normale/min.

Invece, volevo che i file JavaScript compressi avessero i nomi originali quindi non ho dovuto modificare i riferimenti nel mio markup HTML. Potrei usare i normali file Javascript nel mio ambiente di sviluppo, quindi le versioni ridotte al minimo sarebbero distribuite automaticamente durante la pubblicazione.

Ho trovato una soluzione semplice che fa proprio questo.

Innanzitutto, installare Microsoft Ajax Minifier.

Poi, nel file di progetto di Visual Studio, subito prima del tag di chiusura </Project> aggiungere il seguente:

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

Che cosa fa il codice di cui sopra? Quando pubblichi in Visual Studio, questo codice troverà tutti i file .js e .css nell'origine e creerà una copia miniata utilizzando l'estensione .jsMIN e .cssMIN. Ignorerà i file che sono già stati minimizzati. Quindi copierà questi file minificati nella cartella di distribuzione, utilizzando i nomi dei file originali.

Voilà! Hai appena pubblicato file JS/CSS minificati, mentre i tuoi file originali rimangono intatti nel tuo ambiente di sviluppo.

Opzionale:
Vuoi che Ajax Minifier sia impacchettato con il tuo progetto? Dalla cartella di installazione Ajax Minifier, è possibile spostare AjaxMin.dll e AjaxMinTask.dll direttamente nella directory di origine. Li ho inseriti nella mia cartella App_Data. Una volta che sono da qualche parte nella tua fonte, in Visual Studio fai clic con il pulsante destro del mouse, seleziona Include in Project e modifica la loro proprietà Build Action a None.

Poi nel codice ho incluso in precedenza, il cambiamento
<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
a
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" />
Fatto.

Un consiglio di risoluzione dei problemi:
Il mio codice principale sopra esegue AfterBuild e solo quando la configurazione è Release. È così che verrà eseguito solo durante una pubblicazione.Se la tua configurazione è denominata in altro modo o vuoi che venga eseguita in altre circostanze, modifica il codice in base alle esigenze.