在 Visual Studio 2013 中，如何在构建后步骤中缩小 Javascript 和 CSS答案

【问题标题】：In Visual Studio 2013, how do I minify Javascript and CSS in the post-build step在 Visual Studio 2013 中，如何在构建后步骤中缩小 Javascript 和 CSS
【发布时间】：2014-12-18 14:58:16
【问题描述】：

在 Visual Studio 2013 中，如何在后期构建步骤中缩小 Javascript 和 CSS？我希望将每个 css 和 js 文件压缩到同一个文件夹中的 .min.js 或 .min.css 中。

我不想签入缩小的文件，而只是让它们在构建后生成。

【问题讨论】：

Visual Studio 库中有一个免费的插件：visualstudiogallery.msdn.microsoft.com/…
B&M 是内置的。配置 bundleconfig 并确保存在 WebGrease 和 Antlr 引用。运行时将根据您在 web.config 中的 debug="false" 使用捆绑和缩小的文件。
您不是在开发 MVC 应用程序，是吗？如果是这样，它会自动缩小资源文件。
欺骗目标的质量低于此目标。重新打开。

标签： javascript css visual-studio-2013 minify post-build-event

【解决方案1】：

我发现所有解决方案都需要为最小化版本使用不同的文件名，并且在使用正常/最小化版本之间切换需要做很多额外的工作。

相反，我希望压缩的 JavaScript 文件具有原始名称，因此我不必更改 HTML 标记中的引用。我可以在我的开发环境中使用普通的 Javascript 文件，然后在发布时会自动部署最小化版本。

我找到了一个简单的解决方案。

首先，安装Microsoft Ajax Minifier。

然后，在您的 Visual Studio 项目文件中，在结束 </Project> 标记之前添加以下内容：

<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
<Target Name="AfterBuild" Condition="'$(ConfigurationName)'=='Release'">
  <ItemGroup>
    <JS Include="**\*.js" Exclude="**\*.min.js;obj\**\*.*" />
  <CSS Include="**\*.css" Exclude="**\*.min.css;obj\**\*.*" />
  </ItemGroup>
  <AjaxMin
    JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".jsMIN"
    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".cssMIN" />
</Target>
<PropertyGroup>
  <CopyAllFilesToSingleFolderForPackageDependsOn>
    CustomCollectFiles;
    $(CopyAllFilesToSingleFolderForPackageDependsOn);
  </CopyAllFilesToSingleFolderForPackageDependsOn>
</PropertyGroup>
<Target Name="CustomCollectFiles">
  <ItemGroup>
    <MinJS Include="**\*.jsMIN" />
    <FilesForPackagingFromProject Include="%(MinJS.Identity)">
      <DestinationRelativePath>%(RecursiveDir)%(Filename).js</DestinationRelativePath>
    </FilesForPackagingFromProject>
    <MinCSS Include="**\*.cssMIN" />
    <FilesForPackagingFromProject Include="%(MinCSS.Identity)">
      <DestinationRelativePath>%(RecursiveDir)%(Filename).css</DestinationRelativePath>
    </FilesForPackagingFromProject>
  </ItemGroup>
</Target>

上面的代码是做什么的？当您在 Visual Studio 中发布时，此代码将在您的源代码中找到每个 .js 和 .css 文件，并使用扩展名 .jsMIN 和 .cssMIN 创建一个缩小的副本。它将忽略已经缩小的文件。然后它将使用原始文件名将这些缩小的文件复制到部署文件夹。

瞧！您刚刚发布了缩小的 JS/CSS 文件，而您的原始文件在您的开发环境中保持不变。

可选：
想要将 Ajax Minifier 打包到您的项目中吗？从 Ajax Minifier 安装文件夹中，您可以将 AjaxMin.dll 和 AjaxMinTask.dll 直接移动到您的源目录中。我把它们放在我的App_Data 文件夹中。一旦它们位于源中的某个位置，在 Visual Studio 中右键单击它们，选择 Include in Project，并将它们的 Build Action 属性更改为 None。

然后在我上面包含的代码中，更改
<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
到
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" />
完成。

故障排除提示：
我上面的主要代码执行AfterBuild 并且仅当配置为Release 时。所以它只会在发布期间运行。如果您的配置被命名为其他名称，或者您希望它在其他情况下运行，请根据需要修改代码。

【讨论】：

请不要对多个问题发布完全相同的答案（1、2、3、4、5）。如果问题确实是重复的，那么您应该将您的单一答案发布到最佳问题并标记/投票以将其他问题关闭为重复。如果这些不是重复的，那么您需要调整特定问题的每个答案。
@ArtjomB。答案对每个问题都适用且正确。这些问题非常相似，因此不需要自定义答案。如果您认为这些问题是骗人的，请随时采取行动。我永远不会两次发布相同的答案，但是，这个问题已经以几种不同的方式提出，没有完整的简单答案。这个答案实现了这一点，所以现在每个 OP 都有答案，以及任何寻找答案但偶然发现其中一个问题变体的人。
我确实投票关闭，因为您回答的几乎所有问题都重复了。其中一个已关闭。
嘿@DougS，问题；您今天还在为新项目使用此解决方案吗？
@TheLegendaryCopyCoder。是的。太棒了！

【解决方案2】：

使用 Microsoft Ajax Minifier，您可以创建 powershell 脚本来创建给定文件夹中所有文件的缩小版本并将其添加到构建后事件中。

js文件示例（css类似）：

Get-ChildItem *.js -Exclude *.min.js |
    Foreach-Object{
    $file = [io.fileinfo]$_.Name
    ajaxmin $file.Name -out "$($file.Name).min$($file.Extension)"
}

还要检查包含command line switches 完整列表的页面，例如：-map 创建源映射文件。

【讨论】：