快速：如何在應用程序啓動時生成瀏覽器特定的css並提供服務

Question

問題：我不希望每次都向客戶端發送prefixfree.js，我認爲它可能不適合速度並且可以在服務器上解決側。

但同時我不希望服務器一遍又一遍地重做相同的工作。我想塞雷爾語要做到這一點：

當服務器啓動...

1. 轉換少CSS
2. 使4個版本的所有CSS文件：
   1. 的webkit
   2. MOZ
   3. ie
   4. 所有瀏覽器
3. 然後適當地提供它們，所以如果瀏覽器代理是webkit，則提供該css文件的webkit版本。如果無法確定，則提供所有版本。

現在我可以代替所有的文件，我知道它不會增加那麼多的文件大小。但我不知道如何減少編譯器輸出的前綴版本，我不想在命令行中運行每個css文件並運行一些命令來添加前綴。此外，嘗試儘可能地改善流量並不是一個好習慣。

我也可以使用一些ide插件在較少的文件中添加前綴，但這使得css文件變得龐大且難以調試。

Answer 1

要做出正確的決定，您應該知道您必須支持哪些瀏覽器。 Yous也應該考慮Graceful degradation。

個人我認爲運行較少與autoprefix和clean-css在大多數情況下是安全的選擇。

測試很簡單：

npm install less 
npm install less-plugin-clean-css 
npm install less-plugin-autoprefix 
lessc source.less production.css --autoprefix --clean-css 

注意，你可以設置你的目標瀏覽器作爲autoprefix插件參數。爲了支持與Bootstrap相同的瀏覽器，請使用以下內容：

--autoprefix='Android 2.3','Android >= 4','Chrome >= 20','Firefox >= 24','iOS >= 6','Opera >= 12','Safari >= 6' 

你說得對。供應商前綴會使您的CSS文件變大。你應該注意到你可以壓縮/縮小你的代碼（也是zip），你的代碼可以被瀏覽器緩存。

您應該將較大的代碼與-prefix-fee進行比較; 2kb gziped一個額外的http進程和一些JavaScript處理。維拉解釋了爲什麼使用它可能是一個好主意：http://css-tricks.com/five-questions-with-lea-verou/

你的想法是介於上述兩個解決方案之間的某處。你的css代碼可能會稍小一些，但你仍然需要一些JavaScript處理來找出用戶的瀏覽器。

我也可以使用一些ide插件在較少的文件中添加前綴，但是>使得css文件變得龐大且難以調試。

您可以將autoprefix插件與CSS源代碼一起使用，以方便調試（使用Less編譯器的--source-map選項）。在大多數情況下，您將擁有開發和生產版本的代碼。

正如@ seven-phases-max已經說明的那樣，您可以將所有上述內容集成到Grunt或Gulp的構建鏈中。