Utilisation de Microsoft Ajax Minficier avec Visual Studio 2010 1 clic Publish

Question

La Minficateur Microsoft Ajax fournit un construire une tâche qui peuvent être utilisés dans TFS ou des définitions de construction locales.

Je l'ai utilisé avec succès dans un fichier de projet local (construire dans des fichiers séparés) et dans les définitions de construction TFS (écrasant les fichiers JS existants).

Je voudrais passer à l'utilisation de la fonction de publication en 1 clic de Visual Studio 2010 plutôt qu'à une définition de build TFS, mais l'ajout de la tâche de minification en tant que cible de reproduction dans le fichier du projet ne semble pas affecter la fonction de publication en 1 clic.

En utilisant des informations trouvées dans ce fil et ces des articles, J'ai essayé de créer un fichier nommé '[projectName] .wpp.targets dans mon répertoire root wap, et j'ai utilisé le XML suivant:

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="Minify" BeforeTargets="MSDeployPublish">
    <ItemGroup>
      <JS Include="**\*.js" Exclude="**\*.min.js;**\*vsddoc.js;**\*debug.js" />
    </ItemGroup>
    <ItemGroup>
      <CSS Include="**\*.css" Exclude="**\*.min.css" />
    </ItemGroup>
    <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
  </Target>
</Project>

Cela ne semble pas avoir d'effet, et malheureusement Visual Studio ne donne pas grand-chose en termes de commentaires ou d'informations de débogage pour ces outils.

Quelqu'un a-t-il réussi à minimiser JavaScript / CSS en utilisant la fonction publique de publication Visual Studio 2010 en 1 clic?

Answer 1

Je viens d'écrire une entrée de blog détaillée sur la façon de procéder àhttp://sedodream.com/2011/02/25/howtocompresscssjavascriptbeforepublishpackage.aspx et http://blogs.msdn.com/b/webdevtools/archive/2011/02/24/how-to-compress-css-javascript-before-publish-package.aspx.

Voici le contenu

Aujourd'hui, j'ai vu un article sur stackoverflow.com demandant à l'aide de Microsoft Ajax Minficier avec Visual Studio 2010 1-Click Publish. Ceci est une réponse à cette question. Le pipeline de publication Web est assez étendu, il est donc facile pour nous de s'y accrocher afin d'effectuer des opérations comme celles-ci. L'un de ces points d'extension, comme nous l'avons blogué auparavant, consiste à créer un fichier .wpp.targets. Si vous créez un fichier dans le même répertoire de votre projet avec le nom {projectName} .wpp.targets, ce fichier sera automatiquement importé et inclus dans le processus de build / publication. Cela facilite la modification de votre processus de construction / publication sans toujours avoir à modifier le fichier de projet lui-même. J'utiliserai cette technique pour démontrer comment compresser les fichiers CSS & JavaScript qu'un projet contient avant sa publication / emballé.

Bien que la question indique spécifiquement Microsoft Ajax Minficier, j'ai décidé d'utiliser le compresseur contenu dans Packer.net (section Link in Resources). Je l'ai fait parce que lorsque j'ai regardé la tâche MSBuild pour le minificateur Ajax, il ne semblait pas que je pouvais contrôler l'emplacement de sortie des fichiers compressés. Au lieu de cela, il écrivait simplement dans le même dossier avec une extension comme .min.cs ou .min.js. Dans tous les cas, lorsque vous publiez / paquet votre projet d'application Web (WAP), les fichiers sont copiés dans un emplacement temporaire avant que la publication / le package ne se produise. La valeur par défaut de cet emplacement est obj {configuration} package packagetmp où {configuration} est la configuration de construction que vous utilisez actuellement pour votre WAP. Donc, ce que nous devons faire, c'est permettre au WPP de copier tous les fichiers à cet emplacement, puis après cela, nous pouvons comprimer le CSS et le JavaScript qui va dans ce dossier. La cible qui copie les fichiers à cet emplacement est CopyAllFileStosingLefolderForpackage. (Pour en savoir plus sur ces objectifs, jetez un œil aux fichiers de programme de fichier% (x86)% msbuild Microsoft VisualStudio V10.0 web Microsoft.web.publishing.targets.) Pour que notre cible s'exécute après cette cible Nous pouvons utiliser l'attribut MSBuild Aftertargets. Le projet que j'ai créé pour démontrer cela s'appelle CompressBeforepublish, à cause de cela, je crée un nouveau fichier nommé CompressBeforepublish.wpp.targets pour contenir mes modifications.

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <UsingTask TaskName="SmallSharpTools.Packer.MSBuild.Packer"
             AssemblyFile="$(MSBuildThisFileDirectory)..\Contrib\SmallSharpTools.Packer\SmallSharpTools.Packer.dll" />

  <!-- This target will run after the files are copied to PackageTmp folder -->
  <Target Name="CompressJsAndCss" AfterTargets="CopyAllFilesToSingleFolderForPackage">
    <!-- Discover files to compress -->
    <ItemGroup>
      <_JavaScriptFiles Include="$(_PackageTempDir)\Scripts\**\*.js" />
      <_CssFiles Include="$(_PackageTempDir)\Content\**\*.css" />
    </ItemGroup>

    <Message Text="Compressing JavaScript files" Importance="high" />
    <!-- 
      Compress the JavaScript files. 
      Not the usage of %(JavaScript.Identity which causes this task to run once per
      .js file in the JavaScriptFiles item list.
      For more info on batching: http://sedotech.com/resources#Batching
    -->
    <Packer InputFiles="%(_JavaScriptFiles.Identity)"
            OutputFileName="@(_JavaScriptFiles->'$(_PackageTempDir)\Scripts\%(RecursiveDir)%(Filename)%(Extension)')"
            Mode="JSMin"
            Verbose="false"
            Condition=" '@(_JavaScriptFiles)' != ''" />

    <Message Text="Compressing CSS files" Importance="high" />

    <Packer InputFiles="%(_CssFiles.Identity)"
            OutputFileName="@(_CssFiles->'$(_PackageTempDir)\Content\%(RecursiveDir)%(Filename)%(Extension)')"
            Mode="CSSMin"
            Verbose="false"
            Condition=" '@(_CssFiles)' != '' "/>
  </Target>
</Project>

Ici, j'ai créé une cible, compressjsandcss, et j'ai inclus trewettargets = ”copyAllFileStacingLefolderForpackage” qui le fait exécuter après CopyAllFileStacingLefolderForpackage. À l'intérieur de cette cible, je fais deux choses, rassemble les fichiers qui doivent être compressés, puis je les compresse.

1. Rassemblez des fichiers à comprimer

<ItemGroup>
  <_JavaScriptFiles Include="$(_PackageTempDir)\Scripts\**\*.js" />
  <_CssFiles Include="$(_PackageTempDir)\Content\**\*.css" />
</ItemGroup>

Ici, j'utilise une liste d'éléments pour les deux fichiers JavaScript ainsi que pour les fichiers CSS. Notez que j'utilise la propriété _PackageTempDir pour ramasser les fichiers .js & .css dans le dossier temporaire où les fichiers sont écrits pour être emballés. La raison pour laquelle je fais cela au lieu de ramasser des fichiers source est que ma construction peut être publiée d'autres fichiers .js & .css et qui seront publiés. Remarque: Étant donné que la propriété _PackageTempdir commence par un soulignement, il n'est pas garanti de se comporter (ou même d'exister) dans les futures versions.

2. Compressez les fichiers

J'utilise la tâche Packer pour compresser les fichiers .js et .css. Pour les deux ensembles de fichiers, l'utilisation est assez similaire, je ne examinerai que la première utilisation.

<Packer InputFiles="%(_JavaScriptFiles.Identity)"
        OutputFileName="@(_JavaScriptFiles->'$(_PackageTempDir)\Scripts\%(RecursiveDir)%(Filename)%(Extension)')"
        Mode="JSMin"
        Verbose="false"
        Condition=" '@(_JavaScriptFiles)' != ''" />

Ici, la tâche est nourrie de tous les fichiers .js pour la compression. Prenez une note de la façon dont j'ai transmis les fichiers dans la tâche en utilisant,% (_ javascriptfiles.identity), dans ce cas, ce que cela fait est de faire en sorte que cette tâche soit exécutée une fois par fichier .js. La syntaxe% (ABC.DEF) invoque le lot, si vous n'êtes pas familier avec le lot, veuillez consulter ci-dessous. Pour la valeur du fichier de sortie, j'utilise à nouveau la propriété _packagempdir. Dans ce cas, puisque l'élément y réside déjà, j'aurais pu simplifier que ce soit @ (_ javascriptfiles -> '% (fullpath)'), mais je pensais que vous pourriez trouver cette expression utile dans le cas où vous compressez des fichiers qui n'existent pas déjà Dans le dossier _packagempdir.

Maintenant que nous avons ajouté cet objectif au fichier .wpp.targets, nous pouvons publier / emballer notre projet Web et les fichiers .js et .css contenus seront compressés. Remarque: Chaque fois que vous modifiez le fichier .wpp.targets, vous devrez décharger / recharger le projet Web afin que les modifications soient ramassées, Visual Studio cache vos projets.

Dans l'image ci-dessous, vous pouvez voir la différence que la compression de ces fichiers est faite.

Vous pouvez télécharger l'intégralité du projet ci-dessous, ainsi que de jeter un œil à d'autres ressources qui vous intéressent.

Ressources

• http://sedotech.com/content/samples/compressbeforepublish.zip
• http://sedotech.com/resources#batching
• MSBUILD Beforetargets / Aftertargets
• WebdeploymenttoolmsdeployhowtoExcludFilesfRompackageBasedonConfiguration.aspx
• Packer.net

Answer 2

Pour que cela fonctionne dans Visual Studio 2015, nous devons changer le "Aftertarget" de

<Target Name="CompressJsAndCss" AfterTargets="CopyAllFilesToSingleFolderForPackage">

à ce qui suit

<Target Name="CompressJsAndCss" AfterTargets="PipelineCopyAllFilesToOneFolderForMsdeploy">

prendre plaisir!!