按下網站即可壓縮.js和.css文件

Question

我什至不確定是否可以實現我想要的東西，所以我要求你們讓我知道是否有人這樣做過。 所以，我的目標是當我在VS2010中單擊“發布”網站時，將所有javascript文件壓縮為與CSS相同的文件，然后在布局文件中將所有不同js和CSS文件的引用更改為僅合並的兩個那些。 那可行嗎？ 還是可行，但以手動方式進行？

當然，這里的目標是只對網站上的外部文件進行兩次調用，但是在我開發時，我需要查看所有文件，以便我可以實際使用它。 我想我可以在每次推送之前手動完成此操作，但是我寧願使用某些腳本或其他內容自動完成操作。 我還沒有嘗試任何東西，也不想尋找現成的解決方案，我只是想更好地了解問題以及一些技巧。

非常感謝！

Answer 1

這內置於ASP.net 4.5中 。 但與此同時，您應該查看以下項目

• YUI壓縮機
  • 該項目的目的是在壓縮任何Javascript和層疊樣式表之前，將其壓縮到與原始源完全一樣的有效水平。
• 暗盒
  • 盒式磁帶會自動對所有JavaScript，CoffeeScript，CSS，LESS和HTML模板進行排序，連接，縮小，緩存和版本化。
• RequestReduce
  • 超級簡單的自動拼版，縮小和打包解決方案
  • 無需告訴RequestReduce您的資源在哪里
  • 您的CSS和Javascript可以在任何地方-甚至在外部主機上
  • RequestReduce在運行時自動找到它們
• 壓扁
  • SquishIt使您可以壓縮一些JavaScript和CSS。 還有一些LESS和CoffeeScript。
• 梳子
  • .NET庫可為ASP.NET和ASP.NET MVC Web應用程序實現JavaScript和CSS資源的最小化，壓縮，組合和緩存。 簡而言之，它可以幫助您的應用程序通過YSlow和PageSpeed更好地排名。
• 扢
  • 混搭，縮小和驗證您的javascript，樣式表和無點文件。 Chirpy還可以自動更新T4MVC和其他T4模板。

斯科特·漢塞爾曼（Scott Hanselman）不久前就此主題寫了一篇不錯的概述博客文章 。

Answer 2

我對提到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

Answer 3

看看YUI壓縮器@ codeplex.com，這可能真的很有幫助。

Answer 4

我之前所做的是設置一個構建后事件 ，讓它運行一個簡單的批處理文件，以最小化您的源文件。 然后，如果您處於發布模式（而非調試模式），則將引用最小化的源文件。 http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode

Answer 5

我還沒有聽說過發布縮小版本。 我認為使用應該在動態壓縮（如SquishIt）或編譯時間（如YuiCompressor或AjaxMinifier）之間進行選擇。

我更喜歡編譯時間。 我認為必須編譯時間更改文件不是很關鍵。 如果您的css / js代碼行很大，則只能為發行版編譯選擇此操作，並且僅在所需的構建名稱中幫助發布此文件。

Answer 6

我不知道是否有任何辦法可以某種方式從該“發布”按鈕/無論如何鏈接到該功能，但是肯定有這種“靜態構建過程”的可能性。

我個人使用的是Apache ANT以完全按照您在此處描述的內容編寫腳本。 因此，您正在開發未壓縮的js / html / css文件，完成后，您將像ant build一樣調用它，然后將其最小化，壓縮，分割並發布整個Web應用程序。

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