Question

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

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

Answer 1

以下属于VS2015，它对这种情况有更好的支持。

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

VS2015中的gulp介绍可用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创建缩小的副本。它将忽略已经缩小的文件。然后，它将使用原始文件名将这些缩小的文件复制到部署文件夹。

Voilà！您刚刚发布了缩小的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

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

3 个答案: