これを行う方法についての詳細なブログエントリを
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に、VisualStudio2010でMicrosoftAJAXMinifierを使用するという投稿を1クリックで公開しました。これはその質問への回答です。Web Publishing Pipelineは非常に広範囲にわたるため、このような操作を実行するためにWebPublishingPipelineに簡単に接続できます。以前ブログで紹介したように、これらの拡張ポイントの1つは、.wpp.targetsファイルを作成することです。プロジェクトの同じディレクトリに{ProjectName}.wpp.targetsという名前のファイルを作成すると、そのファイルは自動的にインポートされ、ビルド/公開プロセスに含まれます。これにより、プロジェクトファイル自体を常に編集しなくても、ビルド/公開プロセスを簡単に編集できます。この手法を使用して、プロジェクトが公開/パッケージ化される前に、プロジェクトに含まれるCSSおよびJavaScriptファイルを圧縮する方法を示します。
質問にはMicrosoftAJAXMinifierが具体的に記載されていますが、Packer.NETに含まれているコンプレッサーを使用することにしました(リソースセクションのリンク)。これを行ったのは、AJAX MinifierのMSBuildタスクを見ると、圧縮ファイルの出力場所を制御できるように見えなかったためです。代わりに、.min.csや.min.jsなどの拡張子を持つ同じフォルダーに書き込むだけです。いずれの場合も、Webアプリケーションプロジェクト(WAP)を公開/パッケージ化すると、公開/パッケージ化が行われる前にファイルが一時的な場所にコピーされます。この場所のデフォルト値はobj{Configuration}\ Package \ PackageTmp \です。ここで、{Configuration}は、現在WAPに使用しているビルド構成です。したがって、必要なのは、WPPがすべてのファイルをその場所にコピーできるようにし、その後、そのフォルダーにあるCSSとJavaScriptを圧縮できるようにすることです。その場所にファイルをコピーするターゲットは、CopyAllFilesToSingleFolderForPackageです。(これらのターゲットの詳細については、ファイル%Program Files(x86)%\ MSBuild \ Microsoft \ VisualStudio \ v10.0 \ Web \ Microsoft.Web.Publishing.targetsを参照してください。)このターゲットの後にターゲットを実行するにはMSBuildAfterTargets属性を使用できます。これを示すために作成したプロジェクトはCompressBeforePublishと呼ばれます。そのため、変更を含めるためにCompressBeforePublish.wpp.targetsという名前の新しいファイルを作成します。(これらのターゲットの詳細については、ファイル%Program Files(x86)%\ MSBuild \ Microsoft \ VisualStudio \ v10.0 \ Web \ Microsoft.Web.Publishing.targetsを参照してください。)このターゲットの後にターゲットを実行するにはMSBuildAfterTargets属性を使用できます。これを示すために作成したプロジェクトはCompressBeforePublishと呼ばれます。そのため、変更を含めるためにCompressBeforePublish.wpp.targetsという名前の新しいファイルを作成します。(これらのターゲットの詳細については、ファイル%Program Files(x86)%\ MSBuild \ Microsoft \ VisualStudio \ v10.0 \ Web \ Microsoft.Web.Publishing.targetsを参照してください。)このターゲットの後にターゲットを実行するにはMSBuildAfterTargets属性を使用できます。これを示すために作成したプロジェクトは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>
ここでは、1つのターゲットCompressJsAndCssを作成し、AfterTargets =” CopyAllFilesToSingleFolderForPackage”を含めました。これにより、CopyAllFilesToSingleFolderForPackageの後に実行されます。このターゲット内で、2つのことを行います。圧縮する必要のあるファイルを収集してから、それらを圧縮します。
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ファイルごとに1回実行されます。%(abc.def)構文はバッチ処理を呼び出します。バッチ処理に慣れていない場合は、以下を参照してください。出力ファイルの値については、_PackageTempDirプロパティを再度使用します。この場合、アイテムはすでにそこにあるので、@(_ JavaScriptFiles->'%(FullPath)')に簡略化することもできますが、まだ存在しないファイルを圧縮する場合は、その式が役立つと思います。 _PackageTempDirフォルダーにあります。
このターゲットを.wpp.targetsファイルに追加したので、Webプロジェクトを公開/パッケージ化でき、含まれている.jsファイルと.cssファイルが圧縮されます。注:.wpp.targetsファイルを変更するたびに、変更が反映されるようにWebプロジェクトをアンロード/再ロードする必要があり、VisualStudioはプロジェクトをキャッシュします。
下の画像では、これらのファイルを圧縮した場合の違いを確認できます。
以下のプロジェクト全体をダウンロードできます。また、興味があるかもしれない他のリソースもご覧ください。
資力