將備用樣式表合併到一個文件中

Question

我想通過在服務之前將所有CSS文件合併到一個資源中來優化頁面。但是，我還使用了多個備用樣式表，這些樣式表顯然必須包含爲單個鏈接。

除了將備用樣式表打包到數據中的怪異技巧：內聯它們的URI（巧妙，但是......呃），有什麼方法可以將它們合併到一個文件中嗎？我認爲在CSS中可能會出現某種@規則（比如鏈接的媒體屬性可以用CSS中的@media代替），但是我沒有找到它。

Answer 1

你可以用手工做，但這會變得非常乏味，每次都必須這樣做是件痛苦的事情。這聽起來像你需要的是某種過程，每當你改變你的樣式表時，你都可以爲你完成這項任務。

你應該做的是將一個構建工具合併到Grunt的目錄中。我寫了一個初學者指南入門咕嚕：http://strongloop.com/strongblog/use-grunt-js-and-the-power-of-javascript-to-automating-repetitive-tasks/

這裏有一個回購，做你談論的確切的事情：https://github.com/gruntjs/grunt-contrib-cssmin。所有你需要做的是從回購抓住它或使用節點包管理器進行安裝本地到您的項目。

這非常直截了當，併爲您提供了大量的選項來優化您的構建。不僅適用於CSS，還適用於HTML和JavaScript。天空確實是構建選項的極限。這似乎是大多數前端開發過程的方式。

Grunt不是唯一的孩子，有Yeoman和周圍的其他人會做同樣的事情。

我們已經將Grunt推到了極限，並且通過一堆不同的選項做了大量的構建，我們還沒有失望。它真正簡化了我們在前端的流程，並允許我們將代碼優化爲在另一個目錄中生產。

Answer 2

我會去使用Grunt，Brunch（http://brunch.io/）或Gulp（http://gulpjs.com/）的Yeoman（http://yeoman.io/）。

從我的身邊，我更習慣用早午餐（因爲我發現它真的很容易成立），在這裏可以設置這種配置的：

exports.config = 
    files: 
    stylesheets: 
     joinTo: 
     'stylesheets/app.css': /^.*/ 
     order: 
     after: ['vendor/styles/helpers.css'] 

（你可以做JS相同文件實際上）