如何在製作中使用Twitter Bootstrap，LESS或壓縮CSS？

我正在J2EE項目中使用Twitter Bootstrap作爲前端的主要樣式，並提供了一些用於裝配產品的自定義項。如何在製作中使用Twitter Bootstrap，LESS或壓縮CSS？

我不知道應該使用Twitter Bootstrap引入的LESS或CSS格式，如果使用LESS我必須在服務器或客戶端將這些文件編譯爲CSS，哪個Java框架可以幫助我在服務器端，因爲我需要在產品模式下緩存樣式表，否則不需要緩存它們。

我想知道在客戶端的預編譯會影響產品性能，任何人都爲此做出了基準？

來源

2012-05-03 Khoi Nguyen

如果你不想處理服務器端編譯器的麻煩，我會說用CSS去。

如果你走這條路，這是一個Java的好少編譯：
http://www.asual.com/lesscss/

決不編譯客戶端，除非是你有工作，它需要在瀏覽器VS產生巨大影響gzipped或壓縮/縮小CSS。

來源

2012-05-03 03:10:19 Nijikokun

如果使用壓縮CSS，我們不能用較低的機制來定製結核病定義樣式表。你知道任何項目使用http://www.asual.com/lesscss/作爲服務器端預編譯嗎？ –

不是我的頭頂，但它有一個命令行選項，由第三方用戶在這裏記錄：http://www.dopefly.com/techblog/entry.cfm?entry=358 – Nijikokun

您可以量化*「巨大的影響」*？「數量巨大」，還是有任何半智能的客戶端緩存？ –

少真棒發展，但只使用編譯的CSS進行生產。無論你做什麼，絕對沒有less.js/LESS編譯客戶端用於生產。即使您在開發過程中在HTML的頭部使用less.js和.less文件來體驗快速響應時間，其他人的響應時間也將全面覆蓋。我不知道是否有人可以爲它做出好的基準，因爲有無數種方法可以導入/添加LESS文件。如果你在單獨的.less文件中導入並編譯了130個mixins文件，即使結果大小相同，它們的性能也會比一個.less文件的性能有差異。然後將文件大小，計算機硬件規格等考慮在內，使用任何基準測試都很難獲得可靠的結果。

我的建議是要麼使用像node.js和less.js這樣的東西，每次保存時都要編譯爲css。或者使用其中的一些優秀的gui工具，它們會在您每次保存時觀看項目並進行編譯。（LESS.app，Crunch應用程序，WinLESS等）

來源

2012-05-03 04:31:21 jonschlinkert

我必須補充一點，我誤解了最後一句，這對OP來說可能很重要。我認爲這個問題涉及到「編譯客戶端」而不是預編譯。 – jonschlinkert

是的，我的意思是客戶端編譯。但是，如何在下載bootstrap.css後自定義twitter bootstrap以適合我們的產品，我應該使用css覆蓋而不是LESS機制嗎？ –

這取決於您在將來的增強功能中輕鬆合併的多少量，您要做多少定製等等。一般來說，如果您願意使用LESS，那麼我將繼續編輯原生LESS文件，並讓CSS重新生成每次保存時自動編譯。 – jonschlinkert

您可以嘗試使用wro4j，它可以用作運行時或構建時解決方案，用於將較少的服務器端轉換爲css並處理緩存。你可以閱讀更多關於支持較少的wro4j這裏：

來源

2012-08-05 19:32:32

wro4j當然是一個有趣的工具，但問題主要是關於基準測試客戶端less.js.你有什麼結果嗎？ –

儘管我沒有可用的基準測試結果（可能稍後我會做一些），但與預編譯和緩存內容服務相比，在每個請求中編譯爲更少的CSS會對性能產生影響，這應該非常簡單。 –

如何在製作中使用Twitter Bootstrap，LESS或壓縮CSS？

回答

相關問題