Я только что написал подробную запись в блоге о том, как это сделать, на 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