使Visual Studio在publish \ compile上缩小css和js

Question

我有一个项目可以作为网站上的子应用程序（实际上是多个站点）。除此之外，我在这个项目中有几个静态css和js文件。我需要将它们保存为单独的js和css文件，但为了保持谷歌的快乐，我想缩小它们。这些文件将来可能会被修改，因此我希望避免每次更改时手动缩小它们。

是否有一些选项可以让我在编译或发布时缩小这些文件（除了编写构建事件以使用外部工具缩小这些文件）。

Answer 1

以下内容适用于VS2015，它对此方案有更好的支持。

VS2015引入了对gulp或grunt等任务运行器的支持。您可以使用其中之一，并在项目打开时触发任务（即，在您处理项目时始终运行），该任务本身将监视文件更改并运行最小化程序（即在保存时执行）。

有关VS2015的吞咽介绍可用here。

VS2015上更简单的替代方案是使用Web Compiler Extension，它基本上可以自动完成上述操作，只需更少的工作就可以设置它。

Answer 2

我发现所有解决方案都需要为最小化版本使用不同的文件名，以及使用普通/缩小版本之间切换的大量额外工作。

相反，我希望压缩的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时。这样它只会在发布期间运行。如果您的配置被命名为其他配置，或者您希望它在其他情况下运行，请根据需要修改代码。

Answer 3

可以从Visual Studio Marketplace下载一个很好的工具。

Bundler & Minifier