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

本文介绍了在Visual Studio 2013中，如何在构建后步骤中缩小Javascript和CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

In Visual Studio 2013, how do I minify Javascript and CSS in the post-build step? I'd like to have every single css and js file compress into a .min.js, or .min.css in the same folder.

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

I don't want to check in the minified files, but rather just have them generated post-build.

推荐答案

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

All solutions I found required using different filenames for the minimized versions, and a lot of extra work to switch between using the normal/minified versions.

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

Instead, I wanted the compressed JavaScript files to have the original names so I didn't have to change the references in my HTML markup. I could use the normal Javascript files in my development environment, then minimized versions would be automatically deployed when publishing.

我发现了一个简单的解决方案就是这样。

I found a simple solution that does just that.

首先，安装 Microsoft Ajax Minifier 。

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

Then, in your Visual Studio project file, just before the closing </Project> tag add the following :

<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 的缩小副本。它将忽略已缩小的文件。然后它会使用原始文件名将这些缩小的文件复制到部署文件夹。

What does the above code do? When you publish in Visual Studio, this code will find every .js and .css file in your source, and create a minified copy using the extension .jsMIN and .cssMIN. It will ignore files that are already minified. Then it will copy these minified files to the deployment folder, using the original file names.

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

Voilà! You just published minified JS/CSS files, while your original files stay intact on your development environment.

可选： 想要打包Ajax Minifier与您的项目？从Ajax Minifier安装文件夹中，您可以将 AjaxMin.dll 和 AjaxMinTask.dll 直接移动到源目录中。我把它们放在我的 App_Data 文件夹中。一旦它们位于源代码中的某个位置，在Visual Studio中右键单击它们，选择包含在项目中，并更改其构建操作属性为无。

Optional: Want Ajax Minifier to be packaged with your project? From the Ajax Minifier install folder, you can move AjaxMin.dll and AjaxMinTask.dll directly into your source directory. I put them in my App_Data folder. Once they're somewhere in your source, in Visual Studio right-click them, select Include in Project, and also change their Build Action property to None.

然后在上面包含的代码中，更改 < Import Project =$（MSBuildExtensionsPath）\ Mysoftoft\Microsoft Ajax Minifier\ajaxmin.tasks/> to < UsingTask TaskName =AjaxMinAssemblyFile =$（MSBuildProjectDirectory）\ App_Data \ AjaxMinTask.dll/> 完成。

Then in the code I included above, change <Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" /> to <UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" /> Done.

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

A troubleshooting tip: My main code above executes AfterBuild and only when the configuration is Release. That's so it will only run during a publish. If your configuration is named something else, or you want it to run in other circumstances, modify the code as needed.