为 Web 部署缩小 JS/CSS答案

【问题标题】：Minifying JS/CSS for Web Deploy为 Web 部署缩小 JS/CSS
【发布时间】：2012-12-13 05:52:20
【问题描述】：

当我使用 Web 部署发布配置文件进行部署时，我正在尝试使用 AjaxMin 缩小 Javascript 和 CSS。这是我在项目文件中的内容：

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\AjaxMin.tasks" />
  <PropertyGroup>
    <ResGenDependsOn>
      MinifyJavascriptAndCss;
      $(ResGenDependsOn);
    </ResGenDependsOn>
  </PropertyGroup>
  <Target Name="MinifyJavascriptAndCss" 
    Condition=" '$(ConfigurationName)'=='Release' ">
  <ItemGroup>
    <JS Include="$(_PackageTempDir)\**\*.js" 
      Exclude="$(_PackageTempDir)\**\*.min.js;Scripts\*.js" />
  </ItemGroup>
  <ItemGroup>
    <CSS 
      Include="$(_PackageTempDir)\**\*.css" 
      Exclude="$(_PackageTempDir)\**\*.min.css" />
  </ItemGroup>
  <Message Text="Compressing JavaScript and CSS files into $(_PackageTempDir)"
    Importance="high" />
  <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$"
    JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" 
    CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>

如果我查看输出目录，我可以看到文件在出现min.* 文件时被缩小，但是在部署包文件时，它们不包括在内。

如何强制将缩小后的文件包含在发布包中？

【问题讨论】：

标签： visual-studio-2012 webdeploy ajaxmin

【解决方案1】：

它在 VS2010 中对我有用，但对 VS2012 没有任何作用...

<!-- Use AjaxMinifier from Libs folder in this project -->
      <UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectLocation)Libs\AjaxMinTask.dll" />
      <!-- This target will run after publish web in Release mode -->
      <Target Name="MinifyJavaScriptAndCSS" AfterTargets="CopyAllFilesToSingleFolderForPackage" Condition="'$(Configuration)'=='Release'">
        <ItemGroup>
          <!-- Every .js file (exclude *.min.js and *.vsdoc.js files) -->
          <JS Include="$(_PackageTempDir)\**\*.js" Exclude="$(_PackageTempDir)\**\*.min.js;$(_PackageTempDir)\**\*vsdoc.js" />
          <!-- Every .css file (exclude *.min.css files) -->
          <CSS Include="$(_PackageTempDir)\**\*.css" Exclude="$(_PackageTempDir)\**\*.min.css" />

        </ItemGroup>
        <!-- Log in output build window -->
        <AjaxMin JsKnownGlobalNames="jQuery,$" JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".css" />
        <!-- Log in output build window -->
        <Message Text="[pcv] $(MSBuildProjectName) -&gt; Minified: @(JS)" Importance="high" />
        <Message Text="[pcv] $(MSBuildProjectName) -&gt; Minified: @(CSS)" Importance="high" />

      </Target>

【讨论】：

【解决方案2】：

我遇到了同样的问题并成功解决了。有一种简单的方法可以完成这项任务。

将原始 CSS/JS 文件的 Build Action 设置为 None，将 minify 文件的 Build Action 设置为 Content。现在，当您构建项目时，只会出现缩小的 css/java 脚本文件。

【讨论】：

【解决方案3】：

我正在使用 VS2012，这对我有用

<!--<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\AjaxMin.targets" />-->
  <UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\..\packages\AjaxMin.5.14.5506.26202\tools\net40\AjaxMinTask.dll" />
  <Target Name="MinifyJsAndCss"  AfterTargets="CopyAllFilesToSingleFolderForPackage" >
    <ItemGroup>
      <JS Include="$(_PackageTempDir)\App_Scripts\**\*.js" Exclude="$(_PackageTempDir)\**\*.min.js" />
      <CSS Include="$(_PackageTempDir)\**\*.css"  Exclude="$(_PackageTempDir)\**\*.min.css" />
    </ItemGroup>
    <Message Text="Compressing JavaScript and CSS files...(to edit this feature, unload the project, right click it ->edit -> search for 'AjaxMin' bottom of the xml)" Importance="high" />
    <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
  </Target>

【讨论】：