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

时间:2012-03-16 13:46:23

标签: javascript css visual-studio-2010 asp.net-mvc-3 minify

我甚至不确定我想要的东西是否可能,所以我要求你们让我知道是否有人这样做过。所以,我的目标是当我点击VS2010中的“发布”网站时,将所有javascript文件压缩成一个,与css相同然后在我的布局文件中将所有不同js和css文件的引用更改为仅合并那两个那些。那可行吗?或者它是可行的但是以更手动的方式?

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

非常感谢!

6 个答案:

答案 0 :(得分:13)

这内置于ASP.net 4.5。但与此同时,你应该看看以下项目

  • YUI Compressor
    • 此项目的目标是将任何Javascript和级联样式表压缩到与缩小之前完全相同的有效级别。
  • 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
    • Mashes,缩小并验证您的javascript,样式表和无点文件。 Chirpy还可以自动更新T4MVC和其他T4模板。

Scott Hanselman不久前写了关于这个话题的a good overview blog post

答案 1 :(得分:3)

我投了一个提到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将尝试通过检测更改并尝试让浏览器重新加载这些文件来帮助您。这种方法非常适合在他们做一些你不期望的事情时调试到像淘汰这样的库。而且,最好的部分,当您启动网站时,您只需更改web.config并且Cassette将缩小并将所有文件捆绑到尽可能少的捆绑包中。

您可以在他们的文档中找到更多详细信息(虽然有时会落后于开发,但相当不错):http://getcassette.net/documentation/getting-started

答案 2 :(得分:1)

看看YUI compressor @ codeplex.com这可能真的很有帮助。

答案 3 :(得分:1)

我之前做的是设置post-build event,让它运行一个简单的批处理文件,最大限度地减少源文件。然后,如果您处于发布模式(不在调试模式下),则会引用最小化的源文件。 http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode

答案 4 :(得分:1)

我没有听说过发布缩小版。我认为使用应该选择像SquishIt这样的动态缩小或像YuiCompressor或AjaxMinifier这样的编译时间。

我更喜欢编译时间。我不认为编译时间更改文件非常关键。如果你有庞大的css / js代码行,你可以选择此操作仅用于发布编译,如果它有助于仅在所需的构建配置中发布此文件。

答案 5 :(得分:0)

我不知道是否有任何可能的方式以某种方式从“发布”按钮/它是什么来挂钩功能,但它肯定有可能有这种'静态构建过程'。

就我个人而言,我正在使用Apache ANT来准确编写您在那里描述的内容。因此,您正在开发未压缩的js / html / css文件,当您完成后,您会调用ant build,然后缩小,压缩,条带化并发布您的整个Web应用程序。

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