网站推送时压缩 .js 和 .css 文件

Question

我甚至不确定是否有这样的可能性，所以我请你们告诉我是否有人在此之前做过。我的目标是，在单击VS2010中的“发布”网站时，将所有javascript文件压缩成一个文件，同样的，将css文件压缩成一个文件，然后在我的布局文件中将引用从所有不同的js和css文件更改为仅合并的两个文件。这可行吗？或者它可行，但以更手动的方式？

当然，这里的目标是在网站上只有两个外部文件的调用，但在开发时我需要看到所有文件，以便我可以实际使用它。我想我可以在每次推送之前手动完成它，但我宁愿使用某些脚本自动完成它。我还没有尝试过任何东西，我也不寻找现成的解决方案，我只是想更好地了解问题，并可能得到一些技巧。

非常感谢！

- bobek

---

请确保在所有这些JS文件中保留许可证头。 - James M

Answer 1

这个功能已经内置于ASP.net 4.5中。但与此同时，您应该查看以下项目：

• YUI Compressor
  • 该项目的目标是将任何JavaScript和Cascading Style Sheets压缩到一个高效的级别，完全与未缩小之前的源相同。
• Cassette
  • Cassette自动对您的JavaScript、CoffeeScript、CSS、LESS和HTML模板进行排序、连接、缩小、缓存和版本控制。
• RequestReduce
  • 超级简单的自动精灵化、缩小和捆绑解决方案
  • 无需告诉RequestReduce您的资源在哪里
  • 您的CSS和JavaScript可以在任何地方 - 即使在外部主机上
  • RequestReduce会在运行时自动查找它们
• SquishIt
  • SquishIt让您压缩一些JavaScript和CSS。还有一些LESS和CoffeeScript。
• Combres
  • 这个.NET库可以为ASP.NET和ASP.NET MVC Web应用程序启用JavaScript和CSS资源的缩小、压缩、组合和缓存。简而言之，它可以帮助您的应用程序在YSlow和PageSpeed中排名更高。
• Chirpy
  • 混合、压缩和验证您的javascript、stylesheet和dotless文件。Chirpy还可以自动更新T4MVC和其他T4模板。

Scott Hanselman曾经写过一篇关于这个主题的好概述博客文章。

- jessegavin

---

我会选择Casette，因为它已经使用了RAZOR。谢谢！ - bobek

Answer 2

我投票支持提到Cassette的答案，但我将详细介绍一下这个特定选择。 Cassette相当可配置，但在最常见的选项下，它允许您通过以下语法引用CSS和Javascript资源：

Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");

您可以按以下方式在主页面或布局页面中呈现它们：

您可以按以下方式在主页面或布局页面中呈现它们：

@Bundles.RenderStylesheets()
@Bundles.RenderScripts("first")
@Bundles.RenderScripts()

在开发过程中，您的脚本和样式将作为单独的文件包含在其中，Cassette会尝试检测更改并尝试使浏览器重新加载这些文件，这种方法非常适合调试像Knockout这样的库，当它们执行您不希望看到的操作时。最重要的是，在启动网站时，只需更改web.config文件，Cassette就会将所有文件压缩并捆绑成尽可能少的一些包。

您可以在他们的文档中找到更多详细信息（这些文档相当不错，尽管有时滞后于开发）：http://getcassette.net/documentation/getting-started

- Milimetric

---

你知道Cassette是否可以在发布时工作，以便只有经过缩小的资产的部署站点吗？谢谢。 - superjos

是的，superjos，只需在 web.config 中将“debug”设置为“false”即可：http://getcassette.net/documentation/v2/web-config - Milimetric

感谢您的快速回复！我无法从文档中确定，但这对我来说听起来像是运行时缩小，即资产在Web服务器上以明文部署，当请求页面时，资产被缩小并通过电线发送（页面引用缩小的捆绑包）。 相反，我想要的是发布时间的缩小，以便具有仅缩小的资产的可部署软件包。因此，所有缩小和引用文件的更改都将在那个时刻发生。 - superjos

我认为Cassette足够聪明，能够在第一次请求时生成这些文件并继续提供相同的静态文件。 - Milimetric

是的，我也这么想。我只是在寻找一种部署压缩资产的方法，并且不需要在 Web 服务器上部署“清晰”的资产。谢谢。 - superjos

Answer 3

看看YUI压缩器@codeplex.com，这可能非常有帮助。

- steveoh

---

一定要在发布的文件夹上调用压缩，否则会破坏你的源代码！ - Andrew Bullock

Answer 4

我以前做过的是设置一个构建后事件，让它运行一个简单的批处理文件来最小化你的源文件。然后，如果你处于发布模式（而不是调试模式），你将引用最小化的源文件。http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode

- Matthew

Answer 5

我没听说过发布最小化。我认为用户应该在动态压缩（如SquishIt）和编译时压缩（如YuiCompressor或AjaxMinifier）之间做出选择。

我更喜欢编译时压缩。我认为没有必要实时压缩文件。如果您有大量的CSS / JS代码行，您可以仅在发布编译期间执行此操作，并且只在需要的构建配置中发布这些文件。

- Denis Agarev

Answer 6

我不知道是否有可能以某种方式钩入“发布”按钮/任何其他功能，但肯定可以拥有那种“静态构建过程”。

个人而言，我使用Apache ANT来编写脚本，正如您所描述的那样。因此，您可以在未压缩的js/html/css文件上进行开发，完成后，调用ant build，然后对整个Web应用程序进行缩小、压缩、条带化和发布。

示例脚本：https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml

- jAndy