Использование Microsoft AJAX Minifier с Visual Studio 2010 публикация в один щелчок

Microsoft AJAX Minifier предоставляет задача сборки, которую можно использовать в определениях TFS или локальных сборок.

Я успешно использовал это как в локальном файле проекта (создание для отдельных файлов), так и в определениях сборки TFS (перезапись существующих файлов JS).

Я хотел бы перейти к использованию функции публикации в 1 щелчок в Visual Studio 2010, а не определения сборки TFS, однако добавление задачи минификации в качестве цели AfterBuild в файле проекта, похоже, не влияет на функцию публикации в 1 щелчок.

Использование информации из этой темы и эти статьи, Я попытался создать файл с именем '[ProjectName] .wpp.targets в моем корневом каталоге WAP и использовал следующий XML:

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

Похоже, что это не имеет никакого эффекта, и, к сожалению, Visual Studio не дает особых возможностей для обратной связи или отладочной информации для этих инструментов.

Кому-нибудь удалось минимизировать JavaScript / CSS с помощью функции публикации в один клик Visual Studio 2010?


person jamiecon    schedule 18.02.2011    source источник


Ответы (2)


Я только что написал подробную запись в блоге о том, как это сделать, на http://sedodream.com/2011/02/25/HowToCompressCSSJavaScriptBeforePublishpackage.aspx и http://blogs.msdn.com/b/webdevtools/archive/2011/02/24/how-to-compress-css-javascript-before-publish-package.aspx.

Вот содержание

Сегодня я увидел сообщение на stackoverflow.com с просьбой об использовании Microsoft AJAX Minifier с Visual Studio 2010 для публикации в один клик. Это ответ на этот вопрос. Конвейер веб-публикации довольно обширен, поэтому нам легко подключиться к нему для выполнения подобных операций. Одна из таких точек расширения, о которой мы писали ранее, - это создание файла .wpp.targets. Если вы создадите файл с именем {ProjectName} .wpp.targets в том же каталоге вашего проекта, то этот файл будет автоматически импортирован и включен в процесс сборки / публикации. Это упрощает редактирование процесса сборки / публикации без необходимости всегда редактировать сам файл проекта. Я буду использовать этот метод, чтобы продемонстрировать, как сжимать файлы CSS и JavaScript, которые содержит проект, перед его публикацией / упаковкой.

Несмотря на то, что в вопросе конкретно говорится о Microsoft AJAX Minifier, я решил использовать компрессор, содержащийся в Packer.NET (ссылка в разделе ресурсов). Я сделал это, потому что, когда я посмотрел на задачу MSBuild для AJAX Minifier, мне не показалось, что я могу контролировать расположение вывода сжатых файлов. Вместо этого он просто будет записывать в ту же папку с расширением, например .min.cs или .min.js. В любом случае, когда вы публикуете / упаковываете свой проект веб-приложения (WAP), файлы копируются во временное расположение до того, как произойдет публикация / пакет. Значение по умолчанию для этого местоположения - obj {Configuration} \ Package \ PackageTmp \, где {Configuration} - это конфигурация сборки, которую вы в настоящее время используете для своего WAP. Итак, что нам нужно сделать, так это позволить WPP скопировать все файлы в это место, а затем после этого мы можем сжать CSS и JavaScript, которые находятся в этой папке. Целевой объект, который копирует файлы в это расположение, - это CopyAllFilesToSingleFolderForPackage. (Чтобы узнать больше об этих целях, просмотрите файл% Program Files (x86)% \ MSBuild \ Microsoft \ VisualStudio \ v10.0 \ Web \ Microsoft.Web.Publishing.targets.) Чтобы наша цель запускалась после этой цели мы можем использовать атрибут MSBuild AfterTargets. Проект, который я создал для демонстрации этого, называется CompressBeforePublish, поэтому я создаю новый файл с именем CompressBeforePublish.wpp.targets для хранения моих изменений.

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

Здесь я создал одну цель, CompressJsAndCss, и включил AfterTargets = ”CopyAllFilesToSingleFolderFolderFolderFolderFolderFolderForPackage”, который заставляет ее выполняться после CopyAllFilesToSingleFolderForPackage. Внутри этой цели я делаю две вещи: собираю файлы, которые нужно сжать, а затем сжимаю их.

1. Соберите файлы для сжатия

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

Здесь я использую список элементов как для файлов JavaScript, так и для файлов CSS. Обратите внимание, что я использую свойство _PackageTempDir для получения файлов .js и .css во временной папке, в которой файлы записаны для упаковки. Причина, по которой я делаю это вместо того, чтобы собирать исходные файлы, заключается в том, что моя сборка может выводить другие файлы .js и .css, которые будут опубликованы. Примечание: поскольку свойство _PackageTempDir начинается с подчеркивания, его поведение (или даже существование) в будущих версиях не гарантируется.

2. Сжать файлы

Я использую задачу Packer для сжатия файлов .js и .css. Для обоих наборов файлов использование очень похоже, поэтому я рассмотрю только первое использование.

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

Здесь в задачу подаются все файлы .js на сжатие. Обратите внимание на то, как я передал файлы в задачу, используя% (_ JavaScriptFiles.Identity), в этом случае это заставляет эту задачу выполняться один раз для каждого файла .js. Синтаксис% (abc.def) вызывает пакетную обработку, если вы не знакомы с пакетной обработкой, см. Ниже. Для значения выходного файла я снова использую свойство _PackageTempDir. В этом случае, поскольку элемент уже находится там, я мог бы упростить его до @ (_ JavaScriptFiles -> '% (FullPath)'), но я подумал, что вы можете найти это выражение полезным в случае, если вы сжимаете файлы, которые еще не существуют в папке _PackageTempDir.

Теперь, когда мы добавили эту цель в файл .wpp.targets, мы можем опубликовать / упаковать наш веб-проект, и содержащиеся в нем файлы .js и .css будут сжаты. Примечание. Каждый раз, когда вы изменяете файл .wpp.targets, вам придется выгрузить / перезагрузить веб-проект, чтобы изменения были сохранены, Visual Studio кэширует ваши проекты.

На изображении ниже вы можете увидеть разницу, полученную при сжатии этих файлов. введите описание изображения здесь

Вы можете скачать весь проект ниже, а также ознакомиться с некоторыми другими имеющимися у меня ресурсами, которые могут вас заинтересовать.

Ресурсы

person Sayed Ibrahim Hashimi    schedule 25.02.2011
comment
+1 за то, что тоже сюда включил содержание сообщения. (И ваши первые две ссылки в разделе "Ресурсы" имеют неправильную косую черту.) - person James Skemp; 28.02.2011
comment
Фантастический ответ, очень признателен! - person jamiecon; 07.03.2011
comment
Кто-нибудь знает о возможности удалить рекламу, добавленную в верхнюю часть минифицированных файлов DLL SmallSharpTools? Я был бы счастлив сделать пожертвование, но не могу допустить, чтобы это сообщение было на моем JS и CSS! - person jamiecon; 08.03.2011

Чтобы это работало в Visual Studio 2015, мы должны изменить "AfterTarget" с

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

к следующему

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

наслаждаться!!

person Sam Lin    schedule 01.07.2016