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

In Visual Studio 2013, how do I minify Javascript and CSS in the post-build step

提问by billythegoat

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.

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

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

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

回答by lukbl

With Microsoft Ajax Minifieryou could create powershell script to create minified versions of all files in given folder and add it to Post-build events.

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

Example for js files(it will be similar for css):

js 文件示例（css 类似）：

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

Check also a page with full list of command line switchese.g.: -map creates source map file.

还检查包含命令行开关完整列表的页面， 例如：-map 创建源映射文件。

回答by Doug S

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.

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

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.

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

I found a simple solution that does just that.

我找到了一个简单的解决方案，可以做到这一点。

First, install Microsoft Ajax Minifier.

首先，安装Microsoft Ajax Minifier。

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

然后，在您的 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>

What does the above code do? When you publish in Visual Studio, this code will find every .jsand .cssfile in your source, and create a minified copy using the extension .jsMINand .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.

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

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

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

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

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

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.

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

A troubleshooting tip:
My main code above executes AfterBuildand 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.

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